在网页开发中,经常会用到图片来丰富页面内容。而如何使图片在div中居中显示呢?下面就来介绍一下使用CSS如何实现。首先,在HTML中添加一个div元素,用来容纳图片,如下所示:<div
<div class="image-container"><br>
<img src="image.jpg" alt="示例图片"><br>
</div>
p {<br>
text-align: center; /* 水平居中 */<br>
}<br>
.image-container {<br>
display: flex; /* 将div进行flex布局 */<br>
justify-content: center; /* 水平居中 */<br>
align-items: center; /* 垂直居中 */<br>
}<br>
.image-container img {<br>
max-width: 100%; /* 图片宽度最大为div的宽度 */<br>
max-height: 100%; /* 图片高度最大为div的高度 */<br>
object-fit: contain; /* 图片保持比例居中展示 */<br>
}
粉丝
0
关注
0
收藏
0