html - 如何使用 CSS 使子图像使用父图像的百分比？

Question

我有一个子元素，它是一张图片。它漂浮在 parent 内部的另一个 div 旁边。我希望图像的宽度是父级父级的百分比。但是，它的父级没有设置宽度可以解决(因为另一个子 div 中的文本可能会有所不同)。有没有办法仍然使用 % 来设置图像相对于祖 parent 的宽度？

<div class="grandparent">
    <div class="parent">
        <!-- I want this to be 30% the width of grandparent -->
        <img class="myImage" src="someimage.jpg" />

        <div class="text">Some text here</div>
    </div>
</div>

parent 可以简单地使用 overflow: hidden; 并且祖 parent 的宽度为 width: 100%; 并且两个 child 都是 float: left;.

编辑: 父 div 必须缩小到子 div，这样它就不会覆盖兄弟 div。这就是为什么它没有宽度但使用 overflow: hidden 的原因。

Answer 1

如果将父级 div 设置为 100%，它应该采用祖父级的宽度。这将使您能够在图像上正确使用 30%。

.grandparent {
  width: 400px;
}

.parent {
  width: 100%;
}

.myImage {
  width: 30%;
}

Fiddle