css div 宽高比

如果你想要设置一个div元素的宽高比，可以使用padding-top属性。具体来说，你可以按照以下步骤进行操作：

1. 首先，给div元素设置一个固定的宽度，例如500px。
2. 然后，使用padding-top属性来设置div元素的高度。这里的关键是要选择一个合适的百分比值来实现宽高比例。例如，如果你想要一个4:3的宽高比，那么padding-top值应该是75%（因为3/4=0.75）。
3. 最后，将div元素的box-sizing属性设置为border-box，以确保padding值不会影响元素的实际尺寸。

以下是一个示例代码：

<div style="width: 500px; padding-top: 75%; box-sizing: border-box;"></div>

在这个例子中，div元素的宽度为500px，高度为宽度的75%（也就是375px），实现了一个4:3的宽高比。你可以根据需要调整宽度和padding-top值，以实现不同的宽高比例。

相关问题

css保持图片宽高比

可以使用 CSS 中的 `aspect-ratio` 属性来保持图片的宽高比。具体做法如下：

1. 给图片的父元素添加 `aspect-ratio` 属性，值为图片宽高比，例如 `aspect-ratio: 16/9;`。

2. 给图片添加 `object-fit` 属性，值为 `cover`，这样可以让图片完全填充其父元素，并且保持宽高比。

以下是示例代码：

<div class="image-wrapper">
  <img src="example.jpg" alt="example">
</div>

<style>
.image-wrapper {
  aspect-ratio: 16/9;
  overflow: hidden; /* 确保图片不会溢出父元素 */
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

在上面的示例中，图片的宽高比为 16:9，因此其父元素的 `aspect-ratio` 属性值设置为 16/9。图片通过 `object-fit: cover` 属性完全填充其父元素，并且保持宽高比。

css video 宽高自适应

要让视频宽高自适应，可以使用 CSS 中的 max-width 和 max-height 属性，设置一个最大宽度和最大高度，然后让视频元素的宽度和高度都为 100%。这样，在保证视频不会超出最大宽度和最大高度的前提下，视频会自动适应其容器的大小。

示例代码如下：

<div class="video-wrapper">
  <video src="myvideo.mp4" controls></video>
</div>

.video-wrapper {
  max-width: 100%;
  max-height: 100%;
}

video {
  width: 100%;
  height: 100%;
}

需要注意的是，视频元素的宽高比例应该与视频本身的宽高比例一致，否则会出现拉伸或留白的情况。如果需要保持视频的宽高比例不变，可以使用 padding-top 或 padding-bottom 属性来设置容器的高度，然后让视频元素的宽度和高度都为 100%。

示例代码如下：

<div class="video-wrapper">
  <div class="video-container">
    <video src="myvideo.mp4" controls></video>
  </div>
</div>

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
}

上面的示例代码假设视频的宽高比例为 16:9，可以根据实际情况进行调整。