css怎么设置图片不变形 |css3 卡片 翻转

img {
max-width: 100%;
height: auto;
}

以上这段代码就可以让图片按比例缩放。其中，max-width属性表示图片宽度最大可以设置为容器大小的100%，也就是图片不会超出其父级元素；而height:auto属性则保持了图片的原始高度比例。

在现实应用中，大家更多地需要设置图片的固定大小。下面是一个实例：

.container {
width: 200px;
height: 200px;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}

这段代码中，大家先设置了一个宽高为200px的图片容器.container。然后，使用.container img选择器设置图片宽高均为100%。最后，大家使用object-fit:cover属性，让图片以填充方式显示。这样，无论图片的大小和比例如何，都可以被缩放至指定大小，并且不会变形。

总结一下，使用CSS设置图片不变形最常用的方法是设置图片的最大宽度为100%而高度自适应、或者使用object-fit:cover属性实现填充方式显示。在实践中，大家可根据具体情况灵活选择这两种方法。