强制div与内部img具有相互的高度和宽度

Question

在搞乱了很多不同的选项后，我决定创建一个简单的16_9.jpg（16x9），然后把它放在div中，以强制div有我理想的比例，但似乎div不关心它的内部元素按比例缩放。例如，我可能会使用img height =“100px”影响div大小，但在使用百分比时它会停止工作。 它似乎是我的最后一招，因为我必须制作一个固定高度的布局，导致未知的确切宽度 - 我只能依靠比例。

Answer 1

在div内部没有固定高度的元素上使用百分比高度会失败，因为百分比高度取决于其容器的高度。例如，如果你的div是200px高，那么设置为100％的内部元素的高度将是200px。但是如果div没有设置高度，则浏览器没有高度来基于内部元素的百分比高度。默认情况下，Div和其他块级元素具有动态高度和宽度，高度由div中包含的元素的高度确定，宽度由包含div的元素的宽度确定。

你可以设置div的宽度基于其内容的一种方法是浮动div，在这种情况下，div将不再将其宽度基于其容器，而是将其基于其子容器。然而，这可能不是最适合您的解决方案;如果没有关于你真正想要实现的目标的更多信息，很难说。