css图片自适应块代码
时间: 2023-10-25 12:11:25 浏览: 84
css自适应的代码
以下是一种CSS实现图片自适应块的代码:
```css
.img-container {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
position: relative;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
```
在这个代码中,我们创建了一个 `.img-container` 容器,它的高度为0,但是使用 `padding-bottom` 属性来设置一个占位符高度,这个高度基于16:9的宽高比。
然后,我们将图片使用 `position: absolute` 定位到容器的顶部和左侧,并使用 `width` 和 `height` 设置图片的大小为100%。最后,使用 `object-fit: cover` 属性来缩放图片以填充整个容器,同时保持比例。
阅读全文