浅谈图片宽度自适应解决方案

</div>

.img-wrap {float: left;}

然则，问题又来了，浮动元素会破坏袈洵有的构造，如不雅不做清除浮动处理，会导致后面的内容紧跟在浮动元素之后。所认为了包管不影响其他内容，我们还得在img-wrap外面加一个容器来控制浮动与否：

.img-wrap { 
display: inline-block; 
 
} 
 
.img-wrap img { 
 
width: 100%; 
 
vertical-align: middle; 
 
}

好了，接下来就是若何控制img-wrap元素的宽度的问题了。我起首想到的是浮动(float)，因为我们知道浮动元素的宽度是随内容变更的，所以我先给img-wrap设置了如下样式：

.img-wrap {display: inline-block;}

<div class="row"> 
 
<div class="img-wrap"> 
 
<img src=http://developer.51cto.com/art/201704/"imgs/560x200.jpg" alt=""> 
 
</div> 
 
</div> 
 
<div class="row"> 
 
<div class="img-wrap"> 
 
<img src=http://developer.51cto.com/art/201704/"imgs/440x200.jpg" alt=""> 
 
</div> 
 
</div> 
 
<div class="row"> 
 
<div class="img-wrap"> 
 
<img src=http://developer.51cto.com/art/201704/"imgs/300x200.jpg" alt=""> 
 
</div> 
 
</div>

好吧，如今我们在来看看，被折腾成什么样子了，图片宽度自适应(3)(http://sandbox.runjs.cn/show/eknk80m9)

哈哈，似乎是我想要的效不雅了。然则，作为一个有点强迫症的开辟者，固然达到了我想要的效不雅，但加了那么独裁嵌套标签，总让我感到不舒畅。于是，我持续折腾，终于我恍然大年夜悟， display:inline-block 的元素宽度也是随内容变更的，并且图片默认样式刚巧也表示为inline-block的效不雅，是否可以大年夜这里下手呢?

<div class="img-wrap"> 
 
<img src=http://developer.51cto.com/art/201704/"imgs/560x200.jpg" alt=""> 
 
	
			 2/3   首页 上一页 1 2 3 下一页 尾页	
			

　　推荐阅读
　　黑暗之心：人工智能内心藏着哪些黑暗？
            
            4月13日消息，据TechnologyReview报道，当机械人决定走特定路线前去仓库，或无人驾驶汽车决定左转或右转时，它们的人工智能(AI)算法是靠什么做出决定的?如今，AI还无法向人们解释本身做出>>>详细阅读


本文标题：浅谈图片宽度自适应解决方案
地址：http://www.17bianji.com/lsqh/34766.html
 1/2    1