关于图片自适应不同分辩率屏幕

一张图片在不同宽度的显示屏中 的显示问题                                                                                                                                            

常用做法是给图片宽度width: 100%;max-width:  无法预知用户将使用多大宽度的图片 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;

}