下面是一种常见的解决方法,使用CSS的padding和position属性来实现div的固定宽高比:
HTML代码:
CSS代码:
.container {
position: relative;
width: 100%;
padding-bottom: 75%; /* 设置固定宽高比(例如4:3的宽高比为75%) */
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
上述代码中,.container是外部容器,.content是实际内容的容器。
首先,将.container的position属性设置为relative,这样.content可以根据.container的位置进行绝对定位。
接下来,设置.container的padding-bottom属性为固定宽高比的百分比。例如,如果希望宽高比为4:3,那么设置为75%(3除以4的百分比)。
最后,将.content的position属性设置为absolute,并设置top、left、width和height属性为0和100%,这样它会填充整个.container,保持固定的宽高比。
这样,当.container的宽度发生变化时,.content会自动调整高度,保持固定的宽高比。
上一篇:保持订阅一系列主题
下一篇:保持DIV或img的比例