html - 为图像创建 div 类

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 或 class 添加到 figure 元素并更新样式，如下所示。向图中添加页脚图像的 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}