img 充满并不失真

发布时间 2023-07-29 10:47:53作者: 大da脸

CSS中的img属性常常用于网页中的图片展示。有时候我们希望图片充满整个容器,但是又不希望图片失真。我们可以使用CSS的一些技巧来实现这个效果。

img {
width: 100%;
height: auto;
object-fit: cover;
}

上面的代码使用了三个属性:width、height和object-fit。

首先,我们将图片的宽度设置为100%,这样图片就能够充满容器。

其次,我们将图片的高度设置为auto。这样做是为了保持图片的宽高比,从而避免图片失真。

最后,我们使用object-fit属性来控制图片的适应方式。cover会使得图片尽可能地填满容器,但是可能会有一些部分被裁剪掉。如果你想保留完整的图片,可以使用contain。

除了以上的方法,我们还可以使用background-image来展示图片,这样就不用考虑图片的宽高比了。

.container {
background-image: url("path/to/image.jpg");
background-size: cover;
}

上面的代码将容器的背景图设置为图片,并且使用background-size属性来控制适应方式。