css实现图片大小自适应

Posted on 2019-09-27 11:33  jessie-xian  阅读(27065)  评论(0)  编辑  收藏  举报

解决代码
html
<img src="..." class="img-responsive" alt="响应式图像">
css

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

（1）display:inline-block 元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。
（2） height:auto，相关元素的高度取决于浏览器。
（3）max-width : 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

原文：https://blog.csdn.net/sunny5319/article/details/79966033