Jinsi ya kuwa na ukubwa wa kina na kina

Mwongozo wa kuelewa kufanya CSS kuwa elementu huzidiwa kina na kina.

Ukubwa wa kina na kina

Kumisha elementu ambao inaweza kufanana kwa ukubwa wa upekee, bila kufikiria nafasi ya ukubwa wa kina na kina (4:3, 16:9 na nyingine):

什么是宽高比？

元素的宽高比描述的是其宽度和高度之间的比例关系。两种常见的视频宽高比是 4:3（20 世纪的通用视频格式）和 16:9（高清电视和欧洲数字电视以及 YouTube 视频的通用格式）。

如何实现 - 高度等于宽度

第一步 - 添加 HTML：

使用容器元素，例如

，如果您想要其中包含文本，请添加一个子元素：


  
Some text

第二步 - 添加 CSS：

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

实例 - 1:1 宽高比

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* 1:1 宽高比 */
  position: relative; /* 如果你希望内部有文本 */
}
/* 如果您希望容器内有文本 */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Kufia kikaa kwa kufia kikaa

其他宽高比

实例 - 16:9 宽高比

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

Kufia kikaa kwa kufia kikaa

实例 - 4:3 宽高比

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

Kufia kikaa kwa kufia kikaa

Mfano - Uwezo wa kizito 3:2

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

Kufia kikaa kwa kufia kikaa

实例 - 8:5 宽高比

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

Kufia kikaa kwa kufia kikaa

Kwa kugawania: Kinaelezo cha kinaelezo cha kinaelezo

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

Mfano - Uwezo wa kizito 3:2

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

Kufia kikaa kwa kufia kikaa

Mafanikio kwa msingi wa tabia hii, kufikia tabaka la kwanza la wasafiri wa kifaa kinachosaidia kufikia tabia hii.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
88 88 89 15 74