css实现宽度与高度成比例

基础知识

overflow

当你使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。我们使用overflow属性来控制这种情况的发生。它有一些可能的值，但是最常用的是：

auto: 当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。
hidden: 当内容过多，溢流的内容被隐藏。
visible: 当内容过多，溢流的内容被显示在盒子的外边（这个是默认的行为）。

盒模型的框

默认情况下background-color/background-image 延伸到了border的外边缘。该行为可以使用将在Background_clip 章中学到的background-clip 属性来改变。
如果content框变得比示例输出窗口大，它将从窗口溢出，此时会出现滚动条，你可以滚动窗口来查看盒子剩余的内容。你可以使用overflow属性来控制溢出——参看下边的 Overflow 章节。
框的高度不遵守百分比的长度；框的高度总是采用框内容的高度，除非指定一个绝对的高度（如：px 或者em），它会比在页面上默认是100%高度更实用。
border也忽略百分比宽度设置。
你应该注意的是框的总宽度是width, padding-right, padding-left, border-right, 以及 border-left 属性之和。在一些情况下比较恼人（例如，假使你想要一个框占窗口宽度的50%，但边界和内边距是用像素来表示时该怎么办？），为了避免这种问题，有可能使用属性box-sizing来调整框模型。使用值border-box，它将框模型更改成这个新的模型：

盒模型

小总结

框模型的width和height（不是content设置的width,height），框模型content不足以放下内部元素时可以延伸到框的外部，即使content设置的height为0，然而默认溢出是当内容过多时溢流的内容被显示在框外边。
示例1:先看溢出框的情况

<style type="text/css">
html {
    font-size: 50px;
}
.wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 35.81%;
    /*overflow: hidden;*/
}
img {
    width: 100%;
}
</style>
<div class="wrapper">
    <img src="http://img1.qunarzz.com/sight/source/1606/59/996c626596a5f6.jpg_r_640x214_54c8b946.jpg" />
</div>

结果1:

效果1.PNG

盒模型1.PNG

发现img溢出到父容器之外
示例2:溢出框被删减的情况

<style type="text/css">
.wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 35.81%;
    overflow: hidden;
}

效果2.PNG

发现设置完overflow之后img超出父容器的部分被删减了。

CSS实现宽度与高度成比例

<!DOCTYPE html>
<html>
<head>
    <title>css实现图片等比例缩放</title>
<style type="text/css">
    .wrapper {
        width: 100%;
        height: 0;
        padding-bottom: 35.81%;
        overflow: hidden;
    }
    img {
        width: 100%;
    }
</style>
</head>
<body>
    <div class="wrapper">
        <img src="http://img1.qunarzz.com/sight/source/1606/59/996c626596a5f6.jpg_r_640x214_54c8b946.jpg" />
    </div>
</body>
</html>

利用框模型内容不足时，元素可以溢出
利用一个容器框模型设置固定的宽高比
因为图片大小示640*214大概高比宽约等于0.3781，所以padding-bottom:35.18%;(padding相对父容器的width)
img设置width:100%然后高度可以自动适应正好等比例

为什么height设置为0?
因为容器如果去掉这一行的话，img下面会出现一个img大小的空白区域，这个区域是设置padding-bottom导致的，所以设置height=0是为了让父元素没有高度。

最后编辑于：2018.11.10 00:05:56