版权声明：本文首发 http://asing1elife.com ，转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82876666
由于浏览器的大小可变，导致放置图片的容器也会随之变化，要让图片和容器大小一起变化，则需要实现图片宽度自适应
更多精彩
- 更多技术博客，请移步 asing1elife’s blog
编写 HTML
- 用父容器包裹图片，当浏览器的大小发生变化时，首先影响到父容器，而不是图片
<div class="img-wrap">
<img src="FullSizeRender 3.jpg">
</div>
<div class="img-wrap">
<img src="logo-ccnu.png">
</div>
<div class="img-wrap">
<img src="thumbfma.png">
</div>
编写 CSS 样式
- 指定父容器的展现方式是 inline-block ，则可以让父容器的宽度随内容变化而变化
- 指定图片的宽度为 100% ，则可以让图片的宽度随父容器宽度变化而变化，而且图片的宽高比使用不变
<style type="text/css">
.img-wrap {
display: inline-block;
}
.img-wrap img {
width: 100%;
vertical-align: middle;
}
</style>
