JS+css 图片自动缩放自适应大小

想要实现图片的自动缩放和自适应大小，我们可以借助JavaScript和CSS技术来实现。以下是具体的攻略：

1.通过CSS设置图片的最大宽度和高度，使得图片能够适应不同的屏幕尺寸，并保持其长宽比不变：

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

2.借助JavaScript技术，在图片加载完成之后对图片进行大小的计算和缩放，以保证其尽可能的充满屏幕，并仍然保持其长宽比不变。以下是基于jQuery的实现示例：

$(document).ready(function() {
  $('img').each(function() {
    var maxWidth = $(this).parent().width(); // 获取图片的父容器宽度作为最大尺寸
    var maxHeight = $(this).parent().height(); // 获取图片的父容器高度作为最大尺寸
    var ratio = Math.min(maxWidth / $(this).width(), maxHeight / $(this).height()); // 计算缩放比例
    $(this).width($(this).width() * ratio); // 缩放图片的宽度
    $(this).height($(this).height() * ratio); // 缩放图片的高度
  });
});

以上的示例代码实现了对页面中所有img标签的自适应缩放，并保持长宽比。

另外一个实现示例可以使用Bootstrap库提供的img-fluid类：

<div class="container">
  <img src="your-image-url" class="img-fluid" />
</div>

img-fluid类会根据图片所在的容器大小来计算和自动调整其大小，以适应页面布局和屏幕尺寸的变化。

总之，要实现图片自动缩放和自适应大小，需要结合CSS设置图片的最大宽度和高度，并通过JavaScript技术在图片加载完成后，计算和缩放其尺寸，以保持其长宽比不变。如果你使用Bootstrap库，可以直接使用img-fluid类来实现相同的效果。