CSS实现图片等比例缩小不变形的实例代码

CSS实现图片等比例缩小不变形，可以通过设置img标签的max-width和max-height属性，来限制其最大的宽度和高度，同时自适应缩放。

以下是实现图片等比例缩小不变形的示例代码：

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

这段代码设置了img标签的最大宽度为100%，高度自动适应，从而实现图片等比例缩小不变形。这里需要注意的是，如果只设置了max-width属性，而没有设置height属性为auto，则图片的高度不会自适应，就会出现图片被拉伸变形的情况。

针对两个不同的场景，下面分别给出另外两个示例：

1. 设置图片容器的最大宽度为600px，图片等比例缩放

<div class="image-wrapper">
  <img src="example.jpg">
</div>

.image-wrapper {
  max-width: 600px;
}

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

这个示例设置了一个图片容器，并设置了容器的最大宽度为600px。同时，使图片在这个容器内等比例缩放，如果图片的宽度大于600px，则会缩小至600px；如果图片的宽度小于等于600px，则保持原样。

1. 通过js控制图片的最大尺寸和缩放比例

<div class="image-wrapper">
  <img id="example-img" src="example.jpg">
</div>

.image-wrapper {
  width: 100%;
}

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

var maxWidth = 600;
var img = document.getElementById('example-img');
var imgWidth = img.naturalWidth;
var imgHeight = img.naturalHeight;
if (imgWidth > maxWidth) {
  var scaleRatio = maxWidth / imgWidth; // 缩放比例
  imgWidth *= scaleRatio;
  imgHeight *= scaleRatio;
}
img.style.width = imgWidth + 'px';
img.style.height = imgHeight + 'px';

这个示例通过JavaScript控制图片的最大尺寸和缩放比例，需要首先获取图片的原始尺寸。如果图片的宽度大于最大宽度，则计算出缩放比例，再通过原始尺寸与缩放比例计算出新的宽高值，最后设置img标签的宽高即可。需要注意的是，这个示例设置了图片容器的宽度为100%。