响应式更改div大小，保持长宽比
当我给图像一个宽度或高度的百分比时，它只会保持其宽高比增长/缩小，但是如果我想与另一个元素具有相同的效果，是否可以完全使用百分比将宽度和高度绑定在一起？
问题答案：
您可以使用纯CSS来完成；无需JavaScript。这利用了padding-top百分比（相对于包含块的
width）的（有点违反直觉）事实。这是一个例子：
.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;
}
<div class="wrapper">
<div class="main">
This is your div with the specified aspect ratio.
</div>
</div>
-
问题内容： 当我给图像一个宽度或高度的百分比时，它只会保持其宽高比增长/缩小，但是如果我想与另一个元素具有相同的效果，是否完全可以使用百分比将宽度和高度绑定在一起？ 问题答案： 您可以使用纯CSS来实现；无需JavaScript。这利用了百分比（相对于包含块的width）（有点违反直觉）的事实。这是一个例子：
-
问题内容： 我需要将元素的 宽度 保持为 高度 的百分比。因此，随着高度的变化，宽度也会更新。 通过为padding-top使用％值可以实现相反的效果，但以padding-left为百分比将是对象宽度的百分比，而不是其高度。 因此，使用这样的标记： 我想使用这样的东西： 为了确保根据盒子 的高度保持 盒子的 长宽比 。高度是可变的，因为它的百分比裕度-当窗口的高度改变时，盒子的高度也会改变。 我知
-
问题内容： 我想创建一个div可以随窗口宽度变化而改变其宽度/高度的。 是否有任何CSS3规则可以允许高度根据宽度而改变，同时保持其长宽比？ 我知道我可以通过JavaScript来做到这一点，但我宁愿只使用CSS。 问题答案： 只需使用百分比值创建包装器，如下所示： 它将导致高度等于其容器宽度的75％（长宽比为4：3）。 这取决于以下事实： 相对于生成的盒子的包含块的宽度计算百分比（来源：w3.o
-
问题内容： 使用CSS flex box模型，如何强制图像保持其纵横比？ JS小提琴：http：//jsfiddle.net/xLc2Le0k/2/ 请注意，图像会拉伸或收缩以填充容器的宽度。很好，但是我们也可以拉伸或缩小 高度 以保持图像比例吗？ 的HTML 的CSS 问题答案： 对于img标签，如果您定义一侧，那么将调整另一侧的大小以保持纵横比，并且默认情况下，图像会扩展到其原始大小。 使用此
-
问题内容： 我有以下代码 div宽度为200px，因此border-bottom也是200px，但是如果我希望border-bottom- bottom仅100px而又不更改div宽度，该怎么办？ 问题答案： 您可以使用伪元素。例如 无需出于演示目的使用额外的标记。IE8也支持：after。 编辑： 如果你需要一个右对齐边框，只是改变与 如果您需要居中对齐的边框，只需设置
-
给定一个具有设置宽度和高度的框，例如x。 当高度或宽度的边缘满足时，我们如何在该框内制作图像，展开、放大（并保持纵横比）以停止增长/放大。 这意味着您将始终看到该框中图像的整个高度和宽度。 请注意，框中并排包含几个img，因此当我们“滚动”这个“框”时，我们总是可以看到整个图像。 让我用三张图片来说明这一点（每个图片下面都有注释）： 图像上方的第一张图像不填充高度或宽度，但它们保持长宽比。 第二，