我该如何使用CSS为多张图片设置不同的样式？

Question

我基本上正在为一篇长文添加各种散布在其中的图像样式。 我希望第一个图像“float:left”，第二个图像“float:right”。我知道可以像这样给图像设置样式：

img {
float: left;
}

这会使得每张图片都具有相同的风格。我该如何使每张图片的样式不同？我尝试将每张图片放在不同的div类中，以便可以对它们进行不同的样式设置，但这并没有起作用。

我也知道，我可以在html标签中对每张图片进行样式设置，就像这样：

<img src="ABCD.png" alt="Raoul Hausmann's ABCD" align="left" height="300px">

我一直听说最好将样式保留在外部样式表(CSS)中，与HTML分开。这种情况下是否需要使用内联样式？

- cphil

---

看起来你走在了正确的轨道上——关于将包含图像的div上添加类，有什么“不起作用”的问题吗？你能展示一下你做了什么以及发生了什么吗？顺便说一句，使用img标签上的height属性指定高度已经不再是首选方法；改用height CSS属性。align同理。 - user663031

@torazaburo 我把"class=__"放错了位置，但是这里所有的答案都帮我搞清楚了。感谢你确认了关于HTML标签中height属性的信息，我就觉得它不对劲。 - cphil

Answer 1

您可以给每个图像分配一个类或ID，以便为每个图像定义不同的CSS样式，例如：

<img src="" class="image1">
<img src="" class="image2">

在CSS文件中，你可以定义：

.image1
{
width:200px;
height:200px;
}
.image2
{
width:300px;
height:300px;
}

- priya786

Answer 2

以上所有内容都很好，我只建议在这种情况下将图片的常见设置分组，以便左/右类仅包含不同之处。

/* Group the common attributesso that you only need to set it once */
.picture, .leftPicture, .rightPicture {
    border: 2px dotted gray;
    width: 200px;
}

.leftPicture {
    float:left;
}

.rightPicture {
    float:right;
}

- Marius Vorster

---

我该如何在HTML标签中将它们分组？我知道如何像这样放置一个类：<img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="leftPicture">，但我不知道如何将“.Picture”类合并到HTML中。 - cphil

你可以只使用.leftPicture，我在这里包含.picture作为不需要对齐的普通图片的示例。HTML中的类名为"class = leftPicture"。我在CSS中进行了分组。你也可以在HTML中完成它（删除.picture旁边的leftPicture和rightPicture引用，然后在CSS中分配两个类..class="image leftPicture"），以达到相同的效果。 - Marius Vorster

Answer 3

给你的图片添加一个类，然后你可以像这样为所有具有该类的图片设置样式：

.left {
  border: solid 5px red;
  float: left;
}

.right {
  border: solid 5px blue;
  float: right;
}

<img src="ABCD.png" class="left">
<img src="ABCD.png" class="right">

- Bill

Answer 4

尝试一下。

img{width: 200px;height:200px;background-color: antiquewhite}
.left{float:left}
.right{float:right}


    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="left">
    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="right">

这将浮动两个图像，一个在左侧，另一个在右侧

- sanoj lawrence

Answer 5

   var modal = document.getElementById('myModal');
   var img = document.getElementById('myImg');
   var modalImg = document.getElementById('modal-image');

   window.openModal = function(img) {
   modal.style.display = "block";
   modalImg.src = img.getAttribute("data-highres");
   }

   

   var span = document.getElementsByClassName("close")[0];

   span.onclick = function() {
   modal.style.display = "none";
   }

   window.onclick = function() {
   if(event.target == modal) {
        modal.style.display = "none";
      }
   }

#myImg {
    cursor: zoom-in;
    transition: 0.3s;
  }

  #myImg:hover {
    opacity: 0.7;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
  }

  .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }

  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
  }

  .close:hover,
  .close:focus {
    color: #bbbbbb;
    text-decoration: none;
    cursor: pointer;
  }

<img onclick="openModal(this);" src="https://unsplash.com/photos/LqKAyU-o6M4" data-highres="https://unsplash.com/photos/LqKAyU-o6M4">


<!-- Modal -->
<div id="myModal" class="modal">
   <!-- Close button -->
   <span class="close">&times;</span>
   <!-- Modal content -->
   <img class="modal-content" id="modal-image">
</div>

- Areeb Saeed Raja