html容器自定义宽高比,使用CSS保持div的宽高比

我已经找到了使用CSS执行此操作的方法，但您必须小心，因为它可能会根据您自己的网站流量而改变。我已经完成了它，以便在我的网站的流体宽度部分内嵌入具有恒定宽高比的视频。

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

...

然后，您可以将所有内容放在带有“视频”类的div中。此视频类可能是您网站中的流媒体元素，因此它本身没有直接的高度限制，但是当您调整浏览器大小时，它将根据网站的流量改变宽度。这可能是您在保持视频的某个宽高比时可能尝试获取嵌入视频的元素。

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

！重要的是，图像具有您希望保持的正确宽高比。此外，请确保图像的大小至少与您期望的视频(或任何维持AR的大小)一样大，以便根据您的布局获得。这将避免在调整百分比大小时图像分辨率中的任何潜在问题。例如，如果您想保持3：2的宽高比，请不要只使用3px x 2px图像。它可能在某些情况下有效，但我没有测试过，它可能是一个好主意，可以避免。

您可能应该已经为网站的流体元素定义了这样的最小宽度。如果没有，最好这样做是为了避免在浏览器窗口太小时关闭元素或重叠元素。在某些时候最好有一个滚动条。网页应该获得的最小宽度约为600像素(包括任何固定宽度的列)，因为除非您正在处理适合手机的网站，否则屏幕分辨率不会变小。！

我使用了一个完全透明的png，但如果你做得对，我真的认为它最终无关紧要。像这样：

...

现在您应该能够添加类似于以下内容的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％，充分利用动态图像提供的不动产。

很酷，嗯？

您可能需要稍微使用它来使其与您自己的设计一起工作，但这实际上对我来说效果非常好。一般的概念就在那里。