图片自适应

图片自适应

<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;

}

display:inline-block 的元素宽度也是随内容变化的，而且图片默认样式恰巧也表现为inline-block的效果。

总体思路：

图片放在div中，铺满div，让div自适应就完成了。

原文链接：http://www.qidianlife.com/Singular/index.php?m=App&c=Article&a=index&id=3229