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

浅谈图片宽度自适应解决筹划

在网页设计中，跟着响应式设计的到来，各类响应式设计筹划层出不穷。对于图片响应式的问题也有很多前端开辟人员在进行研究。比较好的图片响应式假想就是在不合的屏幕分辨率下应用不合实际尺寸的图片，而达到在高速收集情况中应用大年夜或超大年夜高清图片，在低速收集或须要替用户节俭流量资本的情况中应用小而清楚的图片，包管用户无论在何种情况下都能有优胜的浏览体验。然而这是一个宏大年夜而具有挑衅的工作，我这里不做这个评论辩论，因为我今朝还没有这方面很好的实践。这里我是要跟大年夜家评论辩论下同一张图片在不合宽度的显示区域中的显示问题。

问题描述

我们先来看下我想要描述的问题。起首我预备了三张宽度不合的图片，让他们垂直分列在页面中，除了去除图片本身在垂直偏向上产生的间距，不做其他任何样式处理，这种情况我们平日在博文中经常看到，在写博文的时刻经常用到，具体效不雅请看：图片宽度自适应(1)(http://sandbox.runjs.cn/show/wxqdsnmx)。简单看下我们的页面构造：

<img src=http://developer.51cto.com/art/201704/"imgs/560x200.jpg" alt=""><br> 
 
<img src=http://developer.51cto.com/art/201704/"imgs/440x200.jpg" alt=""><br> 
 
<img src=http://developer.51cto.com/art/201704/"imgs/300x200.jpg" alt="">

为了便利查看效不雅，我们直接调剂浏览器宽度来测试。测试效不雅如下gif图所示：

我们不难发明，在我们改变窗口可视区域的时刻，图片宽度并不会随之变更，以至于在小屏幕中我们只能开到图片的一部分，这是很多人所不乐见的，因为这极有可能会导致重要信息损掉。那么这个问题若何解决?

简单测验测验

为了包管信息显示完全，包管图片随可视区域宽度变更而宽度自适应，我直接给图片标签设置了宽度100%，具体效不雅请看：图片宽度自适应(2)(http://sandbox.runjs.cn/show/enkmkdfb)。

和示例一一样，我们照样手动改变可视区域宽度来不雅看图片的表示：

如今看来图片是可以根据可视区域宽度自适应了，然则问题来了：起首，所有图片不论原始大年夜小宽窄一律以可是区域宽度为标准了，齐刷刷的一刀切，毫无美感;其次，当较宽显示区域显示较窄图片时，图片出现严重掉真，甚至掉去辨认度。好吧，窄屏的问题解决了，宽屏的问题有来了，不知道这是要闹哪样!然则问题出来了，我们总要想办法去解决啊，那怎么办呢?

兵来将挡，水来土掩

是问题，总有解决的办法，只是成本高低的问题。对于膳绫擎这个问题我思虑了许久，刚开端我想应用width: 100%;max-width: 图片宽度; 来处理，然则，我发明图片宽度并不同一，max-width须要针对每一个宽度去设置，那根本弗成行，无疑是自找麻烦，因为实际应用中，我们完全无法预知用户将应用多大年夜宽度的图片。所以似乎单大年夜控制图片样式已经找不到什么解决办法了，然则我开端存眷 width:100%; 的问题。

我们知道，在CSS中，宽度的百分比是是相对于父级容器宽度的。如不雅我们能有办法控制图片标签的父容器的宽度，那问题是不是就解决了呢?

起首，为了让图片标签有可控的父元素，我们先对代码构造做一点点调剂：

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

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


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