html中图片缩小的样式设置

以前，我们通常使用像素值来设置 HTML 中的图片大小。这种方法不仅不够灵活，而且很难在响应式设计中使用。幸运的是，现在我们有更好的方式缩小图片，让它们更好地适应不同的屏幕大小。 下面是HTML中缩小图片的样式设置代码：

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

上述的代码中，我们使用了 CSS 属性 max-width 和 height 来设置图片的大小。 首先，我们设置了 max-width 为 100%。这意味着图片的最大宽度将等于它父元素的宽度。这是一个很好的解决方案，因为当我们实现响应式设计时，父元素的宽度经常会改变。当我们把图片放在一个固定宽度的容器里时，它们将自动缩小以匹配容器的大小。 然后，我们设置了 height 为 auto。这意味着图片的高度将按比例自动调整，以便与其宽度一起缩小。 使用这些样式设置，我们可以确保在不同设备上图片的大小自适应。而且我们还可以使用像 @media 查询这样的 CSS 技术，根据屏幕大小甚至调整它们的大小。