css图片不配高度只配宽度,高度就会自动等比显示吗?

html-css016

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是为了让父元素没有高度。

css3有两个新单位,vw和vh,vw表示占用父元素宽度的百分比,vh表示父元素高度的百分比,如20vw表示元素宽度为父元素宽度的百分之二十,你设置宽度和高度都为20vw,就能实现正方形的效果。不过有个bug,就是现在浏览器对css3的支持度不是很大,有些浏览器不支持