Question

我有一个代码可以在我的网站页脚中插入图片。当我从CSS中裁剪这些图片时，网站上的所有图片都会被裁剪。我如何解决此问题并插入div类，如果现在有帮助的话？

*{box-sizing: bortder-box}  /*lang-css*/

figure{
  text-align: center;
  width: 100%;
}
img{margin: 0 10px; border-top: 2px solid red; border-bottom: 4px solid green}
img:first-child{width: 70px; height: 40px}
img:nth-child(2){width: 80px; height: 42px}
img:nth-child(3){width: 90px; height: 44px}
img:nth-child(4){width: 100px; height: 46px}
img:last-child{width: 120px; height: 48px}

<figure> <!--lang-html-->
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
</figure>

Answer 1

更具体地说，您可以在图元素中添加id或类，并像下面一样更新样式。在图中添加页脚图像的id。

<figure id="footer-images">
<img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
<img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
<img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
<img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
<img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
</figure>

#footer-images {text-align: center;width: 100%;}
#footer-images img{margin: 0 10px; border-top: 2px solid red; border-bottom: 4px solid green}
#footer-images img:first-child{width: 70px; height: 40px}
#footer-images img:nth-child(2){width: 80px; height: 42px}
#footer-images img:nth-child(3){width: 90px; height: 44px}
#footer-images img:nth-child(4){width: 100px; height: 46px}
#footer-images img:last-child{width: 120px; height: 48px}

Answer 2

您需要使用特异性。你的css针对的是每张图片。而是在图像里面给图像一个类或目标图像：

figure img{margin: 0 10px; border-top: 2px solid red; border-bottom: 4px solid green}
figure img:first-child{width: 70px; height: 40px}
figure img:nth-child(2){width: 80px; height: 42px}
figure img:nth-child(3){width: 90px; height: 44px}
figure img:nth-child(4){width: 100px; height: 46px}
figure img:last-child{width: 120px; height: 48px}

Answer 3

是的，你应该将img包装在div中并使用如下：

<div>
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
</div>

的CSS：

div{
  width: 70px;
  height: 40px;
}
img{
  width: 100%;
  height: 100%;
}

现在，图像不会被裁剪，而是被拉伸。

如果您甚至不想获得拉伸图像，那么您应该使用背景图片并使用背景尺寸来覆盖：

<div class="bg1"></div>

的CSS：

.bg1{
  background: url(...) no-repeat;
  background-size: cover;
}

为图像创建div类

3 个答案: