📅  最后修改于: 2023-12-03 15:38:10.097000             🧑  作者: Mango
如果你想要在一个 div 中展示多个固定大小的图像,可以使用以下的 HTML 和 CSS 代码实现。
<div class="image-container">
<img src="image1.jpg" alt="image1" class="fixed-size-image">
<img src="image2.jpg" alt="image2" class="fixed-size-image">
<img src="image3.jpg" alt="image3" class="fixed-size-image">
<img src="image4.jpg" alt="image4" class="fixed-size-image">
</div>
在 div 中嵌套了多个 img 标签,每个标签都指定了一个图片文件和 alt 属性,而 class 属性为每个图片统一设定了一个名为 fixed-size-image 的 CSS 类。
.image-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.fixed-size-image {
width: 300px;
height: 200px;
object-fit: cover;
margin: 10px;
}
其中,image-container 类规定了图片的排列方式为 flex 布局,并居中排列。
而 fixed-size-image 类则规定了每个图片的宽度和高度,并使用 object-fit 属性设置图片在固定大小区域内缩放展示,margin 属性使每个图片之间有一定的间隔。
以上的 HTML 和 CSS 代码片段可以展示多个固定大小的图片在一个区域内。