css图片保持比例and图片占满整个div
要使图片保持原有比例并占满整个div，可以使用CSS中的object-fit属性和width、height属性。以下是实现这个需求的CSS样式：
.div-class {
width: 100%; /* 设置div的宽度为100% */
height: 300px; /* 设置div的高度为300px */
overflow: hidden; /* 超出div的图片部分隐藏 */
}
.div-class img {
width: 100%; /* 图片宽度设置为100%，保持宽度比例不变 */
height: 100%; /* 图片高度设置为100%，保持高度比例不变 */
object-fit: cover; /* 图片将覆盖整个元素，保持宽高比 */
}HTML结构：
<div class="div-class">
<img src="path/to/image.jpg" alt="描述">
</div>这样设置后，图片会保持原有的宽高比，并且尽管div的尺寸不同，图片都会占满整个div。如果div的宽度或高度有改变，图片会相应地调整尺寸，保持宽高比不变。
评论已关闭