css中按比例缩小图片大小

在网页设计中，图片通常是必不可少的元素。然而，有时图片的尺寸过大会导致页面加载缓慢，影响用户体验。此时，我们可以使用 CSS 的 max-width 属性按比例缩小图片大小。

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

这段 CSS 代码中，max-width: 100% 表示图片的最大宽度为父元素的宽度。这样，无论图片在任何设备上显示，都会按比例缩小并适应屏幕。

同时，height: auto 可以确保图片的高度按比例缩小，不会变形。

除了按比例缩小图片大小外，我们也可以设置图片的最大高度：

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

这段 CSS 代码中，max-height 表示图片的最大高度为 400px。当图片的高度超过 400px 时，会自动按比例缩小。

总之，通过设置 max-width 和 max-height 属性，我们可以按比例缩小图片大小，使其更好地适应不同的屏幕尺寸。