如何在响应式网页设计中保持图像纵横比
考虑一组典型的图片库缩略图:
<ul><李><一个href＝＂＃＂><imgsrc＝＂https://lorempixel.com/320/180/sports＂/>一个>李><李><一个href＝＂＃＂><imgsrc＝＂https://lorempixel.com/320/180/city＂/>一个>李><李><一个href＝＂＃＂><imgsrc＝＂https://lorempixel.com/352/198/technics＂/>一个>李>ul>我们可以使用CSS在响应式页面模板中以任何大小显示此图库(基本属性如所示):
ul｛宽度：One hundred.％；填充：0；保证金：002新兴市场0；list-style-type：没有一个；｝李｛浮动：左；宽度：33.3％；填充：0；保证金：0；背景颜色：# 000；边境：10px固体# fff；-moz-box-sizing：border-box；box-sizing：border-box；溢出：隐藏的；｝李的｛显示：块；宽度：One hundred.％；｝img｛显示：块；max-width：One hundred.％；｝这工作得很好，因为我们所有的图像都有相同的16:9宽高比。图像的高度正好是宽度的56.25%(9除以16表示为百分比)。
然而，我们网页设计师是偏执狂:人们阴谋反对我们，提供无限大小和宽高比的照片，例如。
<ul><李><一个href＝＂＃＂><imgsrc＝＂https://lorempixel.com/320/180/sports＂/>一个>李><李><一个href＝＂＃＂><imgsrc＝＂https://lorempixel.com/320/320/city＂/>一个>李><李><一个href＝＂＃＂><imgsrc＝＂https://lorempixel.com/200/150/technics＂/>一个>李>ul>
这个问题有多种解决方案:
- 我们可以手动调整每个图像的大小。那既耗时又乏味。<李>我们可以实现一个聪明的基于服务器的自动图像调整解决方案。这可能需要一段时间，最终的图像可能不会像我们希望的那样抛光或优化。<李>我们可以大发脾气，拒绝在这样的条件下工作。当然，这是不专业的，我们没有人会(经常)采取这样的策略。
或者我们可以使用CSS来解决这个问题?
我们可以，但它不像你想象的那么直接。在旧的固定宽度设计时代，我们应该知道图像占位符的宽度。如果它是160px，我们可以把高度设为90px，然后早点离开去喝啤酒。在这个例子中，我们的宽度是容器的33.3%减去左右两边的边界的20px。它可以是任何大小，所以设置一个固定的高度将妨碍我们所需的纵横比。
百分比填充策略
填充的一个鲜为人知的怪癖是设置顶部或底部百分比基于宽度包含块的。如果你的块的宽度是100px，padding-top: 30%;等于30像素。我怀疑这样做是为了使渲染计算更容易，因为元素高度通常是由它们的内容决定的。此外，如果你有一个固定高度为300px的父元素，并设置padding-top: 200%;在子节点上，父节点将至少变成600px——从而导致递归级联，破坏网络。
不管是什么原因，它都非常有用，因为它允许你设置一个内在比率，例如。
#元素｛位置：相对；高度：0；填充：56.25％000；｝该元素将根据容器的宽度保持16:9的比例。高度被设置为0px，但是，因为我们已经设置了位置:相对;，我们绝对可以定位任何子元素。
据我所知，填充技巧是由<一个href＝＂http://alistapart.com/article/creating-intrinsic-ratios-for-video">Thierry Koblentz创建响应视频，但同样的概念也适用于图像或任何其他内容。让我们更新我们的缩略图CSS:
李的｛显示：块；宽度：One hundred.％；位置：相对；高度：0；填充：56.25％000；溢出：隐藏的；｝img｛位置：绝对；显示：块；max-width：One hundred.％；max-height：One hundred.％；左：0；正确的：0；前：0；底：0；保证金：汽车；｝如果没有匹配的16:9尺寸，结果将显示带有黑色边框的图像:
使用CSS。移除图像max-width或max-height可以应用裁剪效果，而不是调整大小。我希望它对你有用。
如果你有兴趣学习更多关于响应式Web设计的知识，请看看我们的新书，<一个href＝＂//www.shaoxingby.com/premium/books/jump-start-responsive-web-design-2nd-edition">快速开始响应式网页设计．这是本文作者克雷格·巴克勒(Craig Buckler)的技术编辑。
