响应式地改变div的大小，保持宽高比不变。

19 浏览
0 Comments

响应式地改变div的大小，保持宽高比不变。

这个问题已经有答案了:

用CSS保持DIV的宽高比

当我给一个图片设置百分比的宽度或高度时，它会自动保持比例，但是如果我想要在另一个元素上实现同样的效果，是否有可能使用百分比将宽度和高度绑定在一起？

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

借鉴Chris的想法，另一个选择是使用伪元素，这样就不需要使用绝对定位内部元素。


  
Square

  
This div will maintain its aspect ratio.

我在这里提供了一个演示：http://codepen.io/tcmulder/pen/iqnDr

编辑：

现在，借鉴Isaac的想法，在现代浏览器中，使用vw单位强制实现纵横比更容易（虽然我不会像他那样也使用vh，否则纵横比将基于窗口高度而变化）。

因此，这简化了事情：


  
Square

  
This div will maintain its aspect ratio.

我在这里提供了一个修改后的演示：https://codepen.io/tcmulder/pen/MdojRG?editors=1100

如果你不希望它变得非常大或非常小，你还可以设置最大高度、最大宽度和/或最小高度、最小宽度，因为现在它是基于浏览器的宽度而不是容器的，所以它将无限增长/缩小。

注意，如果将字体大小设置为vw测量值并将所有内部元素设置为em测量值，还可以缩放元素内的内容，这里有一个演示：https://codepen.io/tcmulder/pen/VBJqLV?editors=1100

0
0 Comments

你可以使用纯CSS来完成这个操作，不需要JavaScript。这利用了一个（有点违反直觉的）事实：padding-top 百分比是相对于包含块的宽度的。这里是一个例子：

.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}


    This is your div with the specified aspect ratio.

0