Genişlik-yükseklik oranı nasıl korunur

CSS ile elementlerin genişlik-yükseklik oranını nasıl koruyacağınızı öğrenin。

如何实现 - 高度等于宽度

第一步 - 添加 HTML：

使用容器元素，例如 <div>，如果您想要其中包含文本，请添加一个子元素：

<div class="container">
  <div class="text">Some text</div> <!-- Eğer konteyner içinde metin istiyorsanız -->
</div>

第二步 - 添加 CSS：

为 padding-top 添加百分比值，以保持 DIV 的宽高比。下例将创建一个宽高比为 1:1 的 DIV（高度和宽度始终相等）：

实例 - 1:1 宽高比

.container {
  arkaplan-rengi: kırmızı;
  genişlik: 100%;
  padding-top: 100%; /* 1:1 genişlik-yükseklik oranı */
  konum: relatifi; /* Eğer içerde metin istiyorsanız */
}
/* Eğer konteyner içinde metin istiyorsanız */
.text {
  konum:绝对;
  üst: 0;
  sol: 0;
  alt: 0;
  sağ: 0;
}

亲自试一试

其他宽高比

实例 - 16:9 宽高比

.container {
  padding-top: 56.25%; /* 16:9 宽高比（9 除以 16 等于 0.5625） */
}

亲自试一试

实例 - 4:3 宽高比

.container {
  padding-top: 75%; /* 4:3 宽高比（3 除以 4 等于 0.75） */
}

亲自试一试

实例 - 3:2 宽高比

.container {
  padding-top: 66.66%; /* 3:2 宽高比（2 除以 3 等于 0.6666） */
}

亲自试一试

实例 - 8:5 宽高比

.container {
  padding-top: 62.5%; /* 8:5 宽高比（5 除以 8 等于 0.625） */
}

亲自试一试

CSS aspect-ratio attribute

在较新的浏览器中，您可以简单地使用 CSS aspect-ratio 属性：

实例 - 3:2 宽高比

.container {
  aspect-ratio: 3 / 2;
}

亲自试一试

表中的数字注明了完全支持该属性的首个浏览器版本。