网页图片宽度自适应解决方案实例

这篇文章主要为大家详细介绍了网页图片宽度自适应解决方案实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

随着响应式设计的火爆，各种响应式设计方案层出不穷。其中对于图片响应式的问题更是很多前端开发人员研究的主题。比较好的图片响应式设想便是在不同的屏幕分辨率下使用不同实际尺寸的图片，而达到在高速网络环境中使用大或超大高清图片，在低速网络或需要替用户节省流量资源的环境中使用小而清晰的图片，保证用户无论在何种环境下都能有良好的浏览体验。今天361源码抛砖引玉式的给大家介绍同一张图片在不同宽度的显示区域中的显示问题。

问题描述

三张宽度不同的图片，让他们垂直排列在页面中，除了去除图片本身在垂直方向上产生的间距，不做其他任何样式处理，这种情况我们通常在发布文章或者帖子的时候经常遇到，具体效果请看

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

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

尝试解决

为了保证信息显示完整，保证图片随可视区域宽度变化而宽度自适应，我直接给图片标签设置了宽度100%，具体效果请看：

和示例一一样，我们还是手动改变可视区域宽度来观看图片的表现：

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

深化解决问题

361源码一直相信只要是问题，就一定会有解决的办法，只是成本高低的问题。对于上面这个问题361源码曾经也思考了许久，刚开始我想使用

width: 100%;max-width: 图片宽度;

来处理，但是，我发现图片宽度并不统一，max-width需要针对每一个宽度去设置，那根本不可行，无疑是自找麻烦，因为实际应用中，我们完全无法预知用户将使用多大宽度的图片。所以似乎单从控制图片样式已经找不到什么解决办法了，但是我开始关注

width: 100%;

的问题。

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

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

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

.img-wrap {float: left;}

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

现在我们在来看看，被折腾成什么样子了：

到这里终于有点像我们期待的效果了。可是，有点缺憾的是加太多层嵌套标签，总让361源码小编感觉不舒服。于是乎继续折腾找方法，终于功夫不负有心人啊

display: inline-block

元素宽度也是随内容变化的，而且图片默认样式恰巧也表现为inline-block的效果，是否可以从这里下手呢？

结构再一次变成只有一层嵌套，然而css样式却需要调整一下：

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

最后，奉送上完整的css代码：

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

是不是学会了啊，很简单的小教程，大家快去尝试一下看看吧。

以上就是网页图片宽度自适应解决方案实例的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持错新网。