<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
</
head
>
<
style
>
/* 第一种情况的样式 */
#box{
border:
1px
solid
#f00;
width:
25%;
padding-bottom:
75%;
}
/* 第二种情况的样式 */
#box1{
border:
1px
solid
#f0f;
padding-right:
25%;
padding-bottom:
75%;
}
<
/
style
>
<
body
>
<!-- 第一种情况的盒子 -->
<
div
id=
"box"
></
div
>
<!-- 第二种情况的盒子 -->
<
div
id=
"box1"
></
div
>
</
body
>
</
html
>
<!-- 这里的情况分两种：
第一种是设置宽度，但是高度不设置的情况
第二种是宽度和高度都不设置的情况
使用的场景：用在图片宽度自适应，并且需要保持宽高比的时候 -->