javascript - 缩放 div 以适合窗口但保持纵横比

Question

如何缩放 div 以适应浏览器视口(viewport)，同时保持 div 的纵横比。我如何使用 CSS 和/或 JQuery 来做到这一点？

Answer 1

你不需要javascript。您可以使用纯 CSS。

padding-top 百分比是相对于包含 block 宽度 解释的。将其与子元素上的 position: absolute 结合使用，您可以将几乎所有内容放入保持其纵横比的框中。

HTML:

<div class="aspectwrapper">
  <div class="content">
  </div>
</div>

CSS:

.aspectwrapper {
  display: inline-block; /* shrink to fit */
  width: 100%;           /* whatever width you like */
  position: relative;    /* so .content can use position: absolute */
}
.aspectwrapper::after {
  padding-top: 56.25%; /* percentage of containing block _width_ */
  display: block;
  content: '';
}
.content {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;  /* follow the parent's edges */
  outline: thin dashed green;            /* just so you can see the box */
}

display: inline-block 在 .aspectwrapper 框的底部边缘下方留出一点额外空间，因此它下方的另一个元素不会与其齐平运行.使用 display: block 将摆脱它。

感谢this post小费!

---

另一种方法依赖于这样一个事实:当您仅调整图像的宽度或高度时，浏览器会尊重图像的纵横比。 (出于演示目的，我会让 google 生成一个 16x9 的透明图像，但实际上您会使用自己的静态图像。)

HTML:

<div class="aspectwrapper">
  <img class="aspectspacer" src="http://chart.googleapis.com/chart?cht=p3&chs=160x90" />
  <div class="content">
  </div>
</div>

CSS:

.aspectwrapper {
  width: 100%;
  position: relative;
}
.aspectspacer {
  width: 100%; /* let the enlarged image height push .aspectwrapper's bottom edge */
}
.content {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  outline: thin dashed green;
}