一张图片在不同宽度的显示屏中 的显示问题
常用做法是给图片宽度 100%;max- 无法预知用户将使用多大宽度的图片 max无法控制 所以我们从父元素考虑
在css中 元素设置宽度为百分比 那么它的宽度是随父元素的宽度变化的 所以我们给每个图片一个父元素 让父元素的宽度随内容变化
（浮动--但容易影响页面布局 display:inline-block ----块级元素宽度随页面而变化） 效果如下：
（大屏时）
（小屏时）
代码如下：
html
<div class="img-wrap">
<img src="imgs/560x200.jpg" alt="">
</div>
<div class="img-wrap">
<img src="imgs/440x200.jpg" alt="">
</div>
<div class="img-wrap">
<img src="imgs/300x200.jpg" alt="">
</div>
css
.img-wrap {
display: inline-block;
}
.img-wrap img {
width: 100%;
vertical-align: middle;
}