css实现宽度与高度成比例
2018-11-09 本文已影响0人
梅格Drum
基础知识
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是为了让父元素没有高度。
