使用CSS自动调整相对于窗口高度的图像

Question

这可能看起来很愚蠢，但无论如何我都会感激一些帮助。

我有一个巨大的图像，我需要使用CSS自动调整到窗口高度的1/3。我需要保持其宽度成比例。如果可能，我不想使用JavaScript。

你能给我一些提示吗？

Answer 1

如果我理解正确，请添加CSS属性：height:33%

不幸的是，我们接近窗户高度的1/3。假设您的图片的父节点是正文，或者也有100％的窗口高度。

您可能需要添加：

html, body {
    height:100%
}

以及图片所在的任何元素。

Answer 2

您可以使用css position属性

执行此操作

#some-container {height:600px; position:relative;}


/* this will make your image height 200px */
#some-contained-image {position:absolute; height:33%}

我整理了一个小提琴here

一旦元素标记了相对位置，那么你可以在它包含的元素上使用绝对位置（无论深度如何）。反直觉地，标记为绝对的项目的位置将相对于标记为相对的容器来确定。

这当然会比高度更有效，所以我不能真的建议你这样做。你可能需要使用javascript来获得你想要的东西。