在网页设计中，随着响应式设计的出现，各种响应式设计方案层出不穷。很多前端开发者也在研究图片响应的问题。更好的图片响应思路是在不同的屏幕分辨率下使用不同实际尺寸的图片，从而实现在高速网络环境下使用大图或超大图的高清图片，在低速网络或需要为用户节省流量资源的环境使用小而清晰的图片，保证用户无论在什么环境下都能有良好的浏览体验。然而，这是一项巨大而具有挑战性的工作，我不会在这里讨论它，因为我在这方面还没有很好的实践。这里想和大家讨论下同一张图片在不同宽度显示区域的显示问题。问题描述先来看看我要描述的问题。首先我准备了三张不同宽度的图片，让它们在页面上竖排。除了去除了图片本身产生的竖向空间，我没有做任何其他的样式处理。我们通常会在博客文章中看到这种情况。它经常在写博客文章时使用。具体效果参见：图片宽度自适应（一）（http://sandbox.runjs.cn/show/wxqdsnMX）。看看我们的页面结构：
为了方便查看效果，我们直接调整浏览器的宽度进行测试。测试结果如下gif所示：不难发现，当我们改变窗口的可见区域时，图片的宽度并没有随之改变，以至于我们只能打开一部分图片在小屏幕上，这是很多这是不可取的，因为很可能会丢失重要信息。那么如何解决这个问题呢？简单的尽量保证信息显示完整，图片的宽度适应可见区域的宽度。图片标签的宽度我直接设置为100%。具体效果参见：图片宽度适配（二）（http://sandbox.runjs.cn/show/enkmkdfb）。和例子1一样，我们还是手动改变可见区域的宽度，看看图片的表现：貌似可以根据可见区域的宽度来适配图片，但是问题来了：首先，所有图片不管它们原来的大小和宽度，但是区域的宽度是标准的，而且是统一的，没有美感；其次，当较窄的图片显示在较宽的显示区域时，图片会严重失真，甚至无法识别。好了，窄屏的问题解决了，宽屏的问题来了。我不知道发生了什么事！但是问题出来了，我们得想办法解决，那怎么办呢？这是一个问题，总有解决办法，只是成本问题。上面的问题我想了很久。一开始想用width:100%;max-width：图片宽度；去处理它。但是我发现图片宽度不统一，每个宽度都需要设置max-width。那根本不可行，无疑是自找麻烦，因为在实际应用中，我们没有办法预知用户会使用的图像宽度。所以好像没有单独控制图片样式的解决方案，不过我开始关注width:100%;问题。我们知道在CSS中，宽度的百分比是相对于父容器的宽度的。如果我们有办法控制image标签父容器的宽度，是不是问题就迎刃而解了？首先，为了让图片标签有一个可控的父元素，我们先对代码结构做一点调整：
