css实现宽度与高度成比例

html-css031

css实现宽度与高度成比例,第1张

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

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

示例1:先看溢出框的情况

结果1:

发现img溢出到父容器之外

示例2:溢出框被删减的情况

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

为什么height设置为0?

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

可以给要设置固定高宽比例的元素加上

max-width:300px

或

min-weidth

具体数值自己定义

注意不要再设置width