css3高度等于其宽度，css高度撑满

CSS3如何固定图片宽度使图片高度按图片比例自适应?

1、使用img标签，给它的width属性设定一个绝对数量值，其高度就会自动按照width的值进行缩放了。

2、宽度和高度不要同时设置，只需要设置一个，另一个就会自动按照图片的原始比例进行缩放，从而使图片不会发生变形。

3、定死宽高中的一个，另一个未定死的数值就会按比例来，如果多了overflow切掉，好处是容易操作，兼容性好，坏处很多，图片内容不能全部展示、可能切掉希望展示的内容只适用于很少情况。

4、自适应显示宽度代码方法：首先，在网页代码的头部，加入一行viewport元标签。

5、vh表示父元素高度的百分比，如20vw表示元素宽度为父元素宽度的百分之二十，你设置宽度和高度都为20vw，就能实现正方形的效果。

6、背景图的话css3的背景缩放：background-size，不兼容低版本ie。最好的办法就是js取得父级的宽高，然后把根据这个宽高给img或背景图定义相同的宽高。

相关问答

Q1: 利用css怎样实现宽和高的比例是1:1

1、css3有两个新单位，vw和vh，vw表示占用父元素宽度的百分比，vh表示父元素高度的百分比，如20vw表示元素宽度为父元素宽度的百分之二十，你设置宽度和高度都为20vw，就能实现正方形的效果。

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

3、此时调整.a-wp的padding-bottom就是调整宽高比例。

4、在不使用js的前提下，靠的就是前面提到的dummy那个块来实现，dummy只设置了一个css属性，margin-top：100%，相信大家都反应过来了。

5、JS获取宽度，设置高度。 纯css无法做到。

Q2: CSS系列篇:CSS3的常见属性

属性：background-position 取值： 属性：background-size 取值： 属性：background-origin 取值： 属性：background-clip 取值： CSS3多背景通过为每个背景属性提供多个属性值实现。

text-shadow 属性：向文本设置阴影。

CSS3高级属性可分为：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。

例如，上边界属性是不会继承的；直觉上，一个段落不会有同文档BODY一样的上边界值。 注解样式表里面的注解使用C语言编程中一样的约定方法去指定。

css3高度等于其宽度的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css高度撑满、css3高度等于其宽度的信息别忘了在本站进行查找喔。