后记

你可能想，搞了半天，这到底能干吗？直接用background-size不就好了，为什么还要得到具体的宽、高，得到了伸缩比又能怎么样。 我也想了想，如果只是图片，似乎上面都是废话。但如果是DOM呢？这是不是就是一种布局方式？

我也不知道，知识有时候就是这样。当你需要用到的时候，你才觉得有用。

我们可以根据上图所示的公式计算出背景图像纵横比例。基于固定纵横比例的示例之上，将上面的示例修改成流体纵横比例：
<code>.figure {
margin: .5em;
//背景图像的宽度为700px
max-width: 700px;
.inner {
border: 10px solid hsla(333,50%,60%,.8);
border-radius: 10px;
}
.image-wrapper {
background: url("http://w3cplus-cdn2.u.qiniudn.com/sites/default/files/blogs/2014/1401/flexible-image.jpg") no-repeat center;
background-size: cover;
height: 92px;
padding-top:25%;
}
p {
background-color: hsla(333,50%,60%,.8);
padding: 10px 10px 0;
color: #fff;
}
}
</code>

比例 hidden

现在讨论图片放进容器后的图片与容器的比例关系hidden，这样我们就可以以此关系让图片随着容器的变化而变化。 注意，hidden是一个小于1的比例，至于为什么要这样设定后面有解释。

以contain布局为例，r_image > r_viewport :

而以cover布局为例，r_image > r_viewport :

以此类推，得到所有情况的 hidden

这样可以看到四种可能性，但是别忘了我们在上面可是推导过 w’_image 、h’_image 。

所以hidden最终的结果是：

可以看出来，hidden就只有两种结果，r_image / r_viewport 或 r _viewport / r_image，而且这个数是小于1的(这是上面就确定的)。

所以，hidden的计算可以简化为:

将图片放进容器

<p><strong>特别声明：</strong>以上方法以及思咱来自于Rolf Timmermans的<a href=" background images with fixed or fluid aspect ratios</a>一文。</p>

基本概念

上面就是我们对于 r_image (图片宽高比)、r_viewport (容器宽高比) 的定义。

<p>根据这个公式，可以轻松计算出：</p>

参考文章

CSS – Contain & Cover

我的博客，欢迎订阅

微博粉丝太少，求粉

1 赞 收藏 评论

总结</h2>

宽高比的影响

不知道大家注意到没有，刚才我们推导contain的 h’_image 和cover的 w’_image 时使用的图片的宽高比总是大于容器的宽高比。

这导致了什么？导致了我们推导时使用的 条件3 是不一定正确的。 额，这么说我也有点晕，看图：

可以看到，我们只考虑了 r_image > r_viewport的情况。

扩展阅读</h2>

关于作者：risker

2014年大学毕业，现在在北京某互联网公司从事前端开发的工作，近半年主要做移动web开发。微博粉丝太少，求粉。 个人主页 · 我的文章 · 7 ·   

<p>上面介绍了使用不同方案来解决图片自适应在Web页面设计中的问题。不管哪种方案，都有自己的优势与不足。抛开JavaScript的解决方案，不管是<code>max-width</code>、<code>background-image</code>还是<code>object-fit</code>都避免不了浏览器的兼容性问题，特别是<code>object-fit</code>尤为突出。在实际应用中，个人更趋向于方案二，因为其可以按照图片纵横向比例显示，不过这种方案比较麻烦的是，需要使用背景图片。</p>

CSS Contain 和 Cover 的数学公式

2015/11/01 · CSS · Contain, Cover

本文作者： 伯乐在线 - risker 。未经作者许可，禁止转载！
欢迎加入伯乐在线 专栏作者。

background-size的 contain和 cover是怎么用的，大家应该都明白。但是里面也有一些有趣的数学关系。

假设我们有一个两栏自适应的布局，在主内容中应用了一个图片，其结构如下：
<div class="figure"> <div class="inner"> ![](http://upload-images.jianshu.io/upload_images/2244949-f80854741861cd7f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) <p class="figcaption">Lo, the robot walks</p> </div> </div>

三种方法

• stretch : 把图片的宽高强行设置为容器的宽高

注: h’_image、w’_image、r’_image分别为图片改变后的高、宽、宽高比。之后文章这些名词也是这个意思，不再解释。

stretch的方式可想而知后果:

那么保持怎样的数学关系才能保证图片放进容器之后不会变形呢？ 答案也是明显的:

r’_image = r_image

接下来介绍的两种方法就是不会变形的，也就是说能够上面的公式对于它们来说是已知条件。

• contain : 让图片适应容器，我们把它“装”进容器，同时也会留下空白。就像我们看电影时的”黑边”。

对于contain方法来说，也只有图片放进容器后的高度( h’_image )是未知的，我们来算一下：

如果不知道contain为什么是这样的建议先看看background-size

• cover : 也可以让图片“遮”住容器。

和contain对应，cover方法要来算一下 w’_image

<p>假设我们有一张700像素宽和467像素高的图像。当宽度改变时，我们需要维护其纵横向比例是“16:9”。下面有一个示例，我们使用像素为单位，当然也可以使用<code>em</code>为单位，但我们的结构和前面示例一样：</p>

结论

我们考虑r_image < r_viewport后加完整了，图片放进容器之后的宽、高如下：

这样我们就求到了图片在应用background-size属性之后在容器中实际的宽、高。

<p>他的特征同样是依靠覆盖背景图像的纵横比例来实现，假设我们的比例为：</p>

<pre>

<p>使用<code>Object-fit</code>属性有一个受限条件，需要在样式中显示的设置图片的尺寸。然后通过其属性值<code>fill</code>、<code>cover</code>或<code>contain</code>值来控制图像显录的纵横比例。在此并不建议使用，不过当作兴趣爱好，可以深入了解他。如果你对此属性感兴趣，可以阅读《<a href=" Object-fit和Object-position</a>》一文，文中详细介绍了<code>object-fit</code>属性的具体使用。</p>

<code>//SCSS
.CoverImage {
border: 5px solid green;
margin: .5em auto;
background: url("http://w3cplus-cdn2.u.qiniudn.com/sites/default/files/blogs/2014/1401/flexible-image.jpg") no-repeat center;
background-size: cover;
max-height: 700px;
max-width: 467px;
}
.FlexEmbed {
display: block;
overflow: hidden;
position: relative;
&:before {
content: "";
display: block;
width: 100%;
}
}
.FlexEmbed--3by1:before {
padding-bottom: 33.33333%;
}
.FlexEmbed--2by1:before {
padding-bottom: 50%;
}
.FlexEmbed--16by9:before {
padding-bottom: 56.25%;
}
.FlexEmbed--4by3:before {
padding-bottom: 75%;
}
</code>

}

padding: 10px 10px 0;

<p>使用背景图像的方案存在一个问题，不管是固定纵横比例还是流体纵横比例，我们都离不开<code>background-size</code>属性，而此值是CSS3的一个属性，仅有现代浏览器支持。如果要兼容低版本的IE还需要另寻他法。比如说<a href=" href=" href=" Easy Background Resize</a>等插件。<a href=" Bester</a>在<a href=" Flexible Scalable Background Image, Redux</a>一文中也做过这方面的介绍。</p>

}

Flexible Images

<p>效果如下所示：</p>

更重要的是，在现代浏览器中发展到可以自动调整图像的比例，可以根据容器的大小缩放或者放大图像，并且图像的宽高比保持不变。
max-width:100%除了可以应用于自适应元素容器上之外也可以应用于固定元素容器上。而且可以应用于视频和其他富媒体上也具有同等的效果。
img, embed, object, video { max-width: 100%; }
不幸的是，max-width属性在IE7以及其以下版本并无法支持。

color: #fff;

</code></pre>

}

<p>一般情况之下，我们知道图片的尺寸大小，根据纵横比例，我们可以通过下面的公式计算出内距<code>padding-top</code>或<code>padding-bottom</code>的百分比值：</p>

Flexible Images

<p>上面两种方案主要是根据背景图片的纵横比例来实现图像的自适应效果。但在<a href=" href=" CSS cover images</a>一文中提供另一种以纵横比实现图像自适应的效果。</p>

方案三：Object-fit</h2>

Flexible Images

border-radius: 10px;

方案一：max-width
在介绍响应式设计的文章中，为了解决图片的自适应问题，都会提到使用max-width
。Richard Rutter设计首先提出使用max-width的方案：
img { max-width: 100%; }
在上面的示例基础上，我们为img添加max-width值为“100%”：

<p>对应的样式代码：</p>

Flexible Images

<h2>

<p>其效果如下：</p>

<p>除了上述的几种方案之外，其实还有其他的一些解决方案，比如<a href=" href=" Images)技术简介</a>》一文中就介绍了如何使用“Cookie+Server”、“使用<code>noscript</code>标签创建”等其他方法。<a href=" Shora</a>在《<a href=" Fluid Image Containers with a Little CSS Padding Hack</a>》还介绍了一种老方案——<strong>内距和绝对定位实现图片自适应</strong>。当然除了这些还有其他的。<a href=" Alexander</a>特意为解决响应式设计的图片问题，在《<a href=" A Responsive Image Solution</a>》一文中搜集了很多个JavaScript解决方案。感兴趣的同学，可以仔细研究研究。</p>

<code>padding-top(或padding-bottom) = 467 / 700 = 0.667142857 = 66.7142857%

border: 10px solid hsla(333,50%,60%,.8);

<h2>

<p>覆盖背景图像的纵横比例必须得满足以下几个条件：</p>
<ul><li>呈现一个固定的纵横比例，除非特定的最大尺寸超过图像宽度</li>
<li>支持不同的纵横比例</li>
<li>支持最大高度<code>max-height</code>和最大宽度<code>max-width</code></li>
<li>支持不同的背景图像</li>
<li>背景图像填充整个容器</li>
<li>背景图像居中显示</li>
</ul><p>先来看一个简单的模板：</p>

Flexible Images

<h2>模板</h2>

其他方案</h2>

<h2>

background: url("http://w3cplus-cdn2.u.qiniudn.com/sites/default/files/blogs/2014/1401/flexible-image.jpg") no-repeat center;

<p>在固定纵横比例的基础之上，做进一步的调整。假设我们在宽屏的PC上显示大的图片，而在移动设备上，我们不想使用相同的纵横比或图像变得太小。当然我们也不想使用完全相同的高度或让图像变得太高。我们更希望当宽度变小时，其高度也变得更小。而我们也把这种称为流体纵横比例。</p>

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处：图表方面包车型大巴自适应管理，的数学公式

关键词：