基础 CSS 响应式嵌入长宽比

在网站设计中，通常需要将图片或视频等内容以特定的长宽比嵌入到网页中，以达到更好的视觉效果。而在响应式设计中，我们还需要确保这些嵌入的内容能够在不同终端上保持一致的显示效果。本文将介绍如何利用基础 CSS 技术实现响应式嵌入长宽比的效果。

利用 padding 实现响应式嵌入长宽比

利用 padding 属性可以实现简单的长宽比控制。我们可以将一个元素的宽度设置为百分比，而将 padding-top 或 padding-bottom 属性设置为嵌入内容的长宽比，从而控制元素的高度。

以嵌入视频为例，如下是一个基于 padding 实现的响应式嵌入 16:9 长宽比的示例代码：

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 设定 16:9 长宽比 */
}

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

在上述代码中，我们首先给父元素 .video-wrapper 加上了 position: relative;，以使得后代元素 .video-wrapper iframe 的 position: absolute; 工作正常。接着，我们使用百分比设置了 padding-top 属性，以实现 16:9 长宽比的嵌入。最后，我们利用绝对定位将 <iframe> 元素定位在父元素的左上角，并将其宽度和高度都设置为 100%，以使得其填充整个父元素。

利用 css aspect-ratio 实现响应式嵌入长宽比

在 CSS3 中，引入了 aspect-ratio 属性，可以用来直接设置元素的长宽比。我们同样可以使用这个属性来实现响应式嵌入长宽比。

以设置响应式嵌入 4:3 长宽比为例，如下是基于 aspect-ratio 属性的示例代码：

<div class="aspect-ratio-wrapper">
  <img src="https://picsum.photos/800/600" alt="">
</div>

.aspect-ratio-wrapper {
  aspect-ratio: 4/3; /* 设定 4:3 长宽比 */
  overflow: hidden; /* 隐藏溢出部分 */
}

.aspect-ratio-wrapper img {
  width: 100%; /* 将图片宽度设置为 100% */
}

在上述代码中，我们利用了 aspect-ratio 属性直接将父元素的长宽比设定为 4:3。我们还将溢出部分隐藏掉，以保证长宽比不会被破坏。最后，我们将图片的宽度设置为 100%，以填充整个父元素。

总结

本文介绍了利用基础 CSS 技术实现响应式嵌入长宽比的两种方法。以上方法简单易懂，掌握后可以满足网页设计中嵌入不同长宽比内容的需求。