保持div的固定宽高比_编程开发

保持div的固定宽高比

创始人

2024-11-21 16:00:25

0次

下面是一种常见的解决方法，使用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的比例

保持div的固定宽高比

相关内容

热门资讯