CSS如何实现图片等比例缩放不变形
CSS可以通过设置容器的宽度或高度，并保持图片的宽高比来实现图片等比缩放。使用 max-width 和 max-height 属性可以防止图片被拉伸变形。
以下是实现图片等比缩放的CSS代码示例：
.img-container {
display: block;
max-width: 100%; /* 限制图片最大宽度不超过其容器的宽度 */
max-height: 100%; /* 限制图片最大高度不超过其容器的高度 */
width: auto; /* 宽度自动，保持图片原始宽高比 */
height: auto; /* 高度自动，保持图片原始宽高比 */
}HTML中使用该样式：
<div class="img-container">
<img src="path/to/your/image.jpg" alt="描述文字">
</div>在这个例子中，.img-container 是一个包裹图片的容器，它将限制图片的最大宽度和高度，不超过自身的尺寸，并且保持图片原始的宽高比。当你调整 .img-container 的大小时，图片会自动调整大小以保持其等比例。
评论已关闭