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

Question

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

Answer 1

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

将 div 的宽度设置为基于其内容的一种方法是 float div，在这种情况下，div 的宽度将不再基于其容器，而是基于其子元素.但是，这可能不是您的最佳解决方案；如果没有关于您真正想要完成的事情的更多信息，很难说。