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

在网页设计中，随着响应式设计的到来，各种响应式设计方案层出不穷。对于图片响应式的问题也有很多前端开发人员在进行研究。比较好的图片响应式设想便是在不同的屏幕分辨率下使用不同实际尺寸的图片，而达到在高速网络环境中使用大或超大高清图片，在低速网络或需要替用户节省流量资源的环境中使用小而清晰的图片，保证用户无论在何种环境下都能有良好的浏览体验。然而这是一个庞大而具有挑战的工作，我这里不做这个讨论，因为我目前还没有这方面很好的实践。这里我是要跟大家讨论下同一张图片在不同宽度的显示区域中的显示问题。

问题描述

我们先来看下我想要描述的问题。首先我准备了三张宽度不同的图片，让他们垂直排列在页面中，除了去除图片本身在垂直方向上产生的间距，不做其他任何样式处理，这种情况我们通常在博文中经常看到，在写博文的时候经常用到，具体效果请看，简单看下我们的页面结构：

<img src="imgs/560x200.jpg" alt=""><br><img src="imgs/440x200.jpg" alt=""><br><img src="imgs/300x200.jpg" alt="">

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

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

简单尝试

为了保证信息显示完整，保证图片随可视区域宽度变化而宽度自适应，我直接给图片标签设置了宽度100%，
和示例一一样，我们还是手动改变可视区域宽度来观看图片的表现

现在看来图片是可以根据可视区域宽度自适应了，但是问题来了：首先，所有图片不论原始大小宽窄一律以可是区域宽度为标准了，齐刷刷的一刀切，毫无美感；其次，当较宽显示区域显示较窄图片时，图片出现严重失真，甚至失去识别度。好吧，窄屏的问题解决了，宽屏的问题有来了，不知道这是要闹哪样！但是问题出来了，我们总要想办法去解决啊，那怎么办呢？

兵来将挡，水来土掩

是问题，总有解决的办法，只是成本高低的问题。对于上面这个问题我思考了许久，刚开始我想使用width: 100%;max-width: 图片宽度; 来处理，但是，我发现图片宽度并不统一，max-width需要针对每一个宽度去设置，那根本不可行，无疑是自找麻烦，因为实际应用中，我们完全无法预知用户将使用多大宽度的图片。所以似乎单从控制图片样式已经找不到什么解决办法了，但是我开始关注 width:100%; 的问题。

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

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

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

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

img-wrap {float: left;}

但是，问题又来了，浮动元素会破坏原有的布局，如果不做清除浮动处理，会导致后面的内容紧跟在浮动元素之后。所以为了保证不影响其他内容，我们还得在img-wrap外面加一个容器来控制浮动与否：

<div class="row"><div class="img-wrap"><img src="imgs/560x200.jpg" alt=""></div></div><div class="row"><div class="img-wrap"><img src="imgs/440x200.jpg" alt=""></div></div><div class="row"><div class="img-wrap"><img src="imgs/300x200.jpg" alt=""></div></div>

哈哈，好像是我想要的效果了。但是，作为一个有点强迫症的开发者，虽然达到了我想要的效果，但加了那么多层嵌套标签，总让我感觉不舒服。于是，我继续折腾，终于我恍然大悟， display:inline-block 的元素宽度也是随内容变化的，而且图片默认样式恰巧也表现为inline-block的效果，是否可以从这里下手呢？

<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样式却需要调整一下

最后，补上完整的css代码

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

浅谈图片宽度自适应解决方案相关推荐

微信小程序 - 富文本图片宽度自适应（正则）
引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确思路把图片的宽度改为手 ...
[css] 怎么使图片宽度自适应呢？
[css] 怎么使图片宽度自适应呢? 百分比 vw padding:百分比个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端 ...
微信小程序 rich-text 富文本图片宽度自适应的方法
在小程序里面展示商品详情的富文本会有图片会显示他原来的宽度这时候在手机就溢出了这里的正确的处理办法是: 把图片的宽度改为手机屏幕对应的宽度或者 100% uniapp WXML < ...
HTML5 实现图片宽度自适应手机屏幕宽度的CSS
HTML5实现图片自适应手机屏幕页面的css. HTML5写手机页面,读取图片,如果图片大于手机屏幕的宽度,就显示100%屏幕,如果小于,就显示原图. CSS的max-width就能实现了,切不要设置 ...
浅谈图片展示、图片自适应解决方案
文章目录导读 CSS 解决方案 background-size
浅谈图片加载：逐行扫描VS交错扫描
一,前言最近在不断地扩充自己web开发的知识面,看得比较泛,难得五一假期就在学习之余实践一下,毕竟纸上得来终觉浅,况且"纸上"的不一定都对,之前看了一篇博客讲图片加载的,博主大概 ...
浅谈薄膜行业MES解决方案
随着国家节能减排的号召,新能源电动汽车蓬勃发展,带动整个锂电行业的崛起,锂电池的结构中,隔膜是关键的内层组件之一.隔膜的性能决定了电池的界面结构.内阻等,直接影响电池的容量.循环以及安全性能等特性,性 ...
浅谈图片蒙版效果-webkit-mask
会用PS的童鞋一定知道"蒙版"的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效 ...
浅谈齿轮行业MES解决方案的模块和功能
齿轮生产业是我国装备制造业的基础性产业,产业关联度高,吸纳就业强,技术资金密集,是装备制造业实现产业升级.技术进步的重要保障.在机械工业当中,齿轮是最重要不可缺的基础部件,应用在国民经济各个领域,我国 ...

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

浅谈图片宽度自适应解决方案相关推荐

最新文章

热门文章