CSS--解决图片变形的方法
为了解决图片变形的问题，可以使用CSS的object-fit属性。这个属性可以指定容器内图片的填充方式。
object-fit属性可以设置的值有：
fill：默认值，拉伸图片以填充容器。contain：保持图片的宽高比，缩放图片以完全装进容器内。cover：保持图片的宽高比，缩放图片以完全覆盖容器。none：不改变图片大小，图片可能会溢出容器。scale-down：效果跟none或contain中较小的那个相同。
例如，如果你希望图片完全覆盖容器，并且不管图片原始的宽高比，可以这样设置CSS：
.img-container {
width: 200px;
height: 200px;
object-fit: cover;
}HTML代码如下：
<div class="img-container">
<img src="path/to/your/image.jpg" alt="Descriptive text">
</div>这样设置后，.img-container内的图片将完全覆盖容器，不管图片原始的比例，且不会变形。
评论已关闭