保持div与CSS的纵横比

2018-06-27 02:12:47

我想创建一个div，可以随着窗口宽度的变化改变它的宽度/高度。

有没有任何CSS3规则可以让高度根据宽度改变， 同时保持高宽比 ？

我知道我可以通过JavaScript来做到这一点，但我宁愿只使用CSS。

只需使用padding-bottom的百分比值创建一个包装器<div> ，如下所示：

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div></div>

`vw`单位：

您可以将vw单位用于元素的宽度和高度 。这可以根据视口宽度保留元素的高宽比。

vw：视口宽度的1/100。 [MDN]

或者，您也可以使用vh作为视口高度，或者甚至使用vmin / vmax来使用较小/较大的视口尺寸（此处讨论）。

例如：1：1宽高比

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

我已经找到了一种使用CSS的方法，但是您必须小心，因为它可能会根据您自己的网站流量而变化。我已经这样做了，以便在我网站的流体宽度部分内嵌入具有恒定长宽比的视频。

假设你有这样的嵌入式视频：

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

然后，您可以将这些全部放在一个带有“视频”类的div中。这个视频类可能是您网站中的流动元素，它本身并没有直接的高度限制，但是当您调整浏览器大小时，它会根据网站流量而改变宽度。这可能是您可能试图让您的嵌入式视频进入，同时保持视频的特定长宽比的因素。

为了做到这一点，我把一个图像放在“视频”类div内的嵌入对象之前。

！重要的部分是图像具有您希望保持的正确的宽高比。此外，请确保图像的大小至少与您期望视频的最小尺寸（或任何您维护AR的尺寸）一样大，以根据您的布局获得。这样可以避免图像在调整百分比时解决任何潜在问题。例如，如果您想保持3：2的宽高比，请不要只使用3像素的2像素图像。它可能在某些情况下工作，但我没有测试它，并且它可能是一个好主意，以避免。

你应该已经有了这样一个最小宽度，就像你的网站流体元素所定义的那样。如果没有，那么这样做是一个好主意，以避免在浏览器窗口太小时关闭或重叠元素。某个时候最好有一个滚动条。网页的最小宽度应在〜600px左右（包括任何固定宽度的列），因为屏幕分辨率不会变小，除非您正在处理电话友好的网站。！

我使用了一个完全透明的PNG，但我并不认为它最终会成为问题，如果你做对了。喜欢这个：

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

现在你应该可以添加类似于以下的CSS：

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

确保您还删除对象内的任何明确的高度或宽度声明，并嵌入通常带有复制/粘贴嵌入代码的标签。

它的工作方式取决于视频类元素的位置属性和要保持特定高宽比的项目。它利用图像在元素中调整大小时保持其适当的高宽比的方式。它告诉视频类元素中的其他内容，通过将其宽度/高度强制为由图像调整的视频类元素的100％来充分利用动态图像提供的房地产。

很酷，呃？

你可能需要花一点时间来处理它，才能使用你自己的设计，但这实际上对我来说意想不到。总体概念就在那里。

链接地址: http://www.djcxy.com/p/75743.html

上一篇: Maintain the aspect ratio of a div with CSS

下一篇: Place input box at the center of div

保持div与CSS的纵横比

vw单位：

例如：1：1宽高比

`vw`单位：