给img标签写自适应css样式

html代码

css代码

.img-xys {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

解释一下css代码

max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。

设置 height:auto，相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。