img 充满并不失真
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属性来控制适应方式。