css图片全部展示的代码 |css字描白边

css 文件pending，less自动编译css，dreamweaver代码css边框代码，css增加点击效果，css 文字超出两行，法国css更新医保卡，css字描白边接下来，在CSS中设置该DIV元素的宽度和高度，以及展示方式为“flex”。代码如下：

#image-gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 500px;
justify-content: center;
align-items: center;
}

其中，justify-content和align-items属性用于控制图片的水平和垂直居中。 最后，在该DIV元素内部插入多个图片元素，通过CSS调整宽度和高度来适应展示。代码如下：

#image-gallery img {
width: 25%;
height: 25%;
object-fit: cover;
margin: 5px;
}

以上代码可以实现在一个DIV容器内展示多张图片，并且每张图片都可以自适应大小，并且达到了水平和垂直居中的效果。你可以根据实际需要进行调整。 完整的HTML和CSS代码如下：

<div id="image-gallery">

<img src="image1.jpg">

<img src="image2.jpg">

<img src="image3.jpg">

<img src="image4.jpg">

</div>

#image-gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 500px;
justify-content: center;
align-items: center;
}
#image-gallery img {
width: 25%;
height: 25%;
object-fit: cover;
margin: 5px;
}