CSS - 如何使 div 与包含的子 img 一样宽

我有一个简单的 div 标记:

<div class="gallery__card">
    <img class="gallery__card__img" src="1.jpg">
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

但我希望 gallery__card 和 gallery__card__img 一样宽，所以文本
图像下方不占用整个页面宽度。



我想避免设置固定宽度，因为这应该是响应式的。

有没有办法在没有 JS 和固定宽度的情况下实现这一点？

jsfiddle:
http://jsfiddle.net/6h19oa1q/

最佳答案

.gallery__card 比 gallery__card__img 宽的原因是因为 text 中的 .gallery__card 。如果删除 text ，它将保持与 .gallery__card__img 一样宽。见 here 。

您可以将 img 设置为具有 width: 100% 并删除您的静态 height 属性，例如 here ，但是您必须确保保持您正在使用的所有图像的纵横比；否则你会有不同的 height s(如果这是一个问题)。

否则，您必须更改构建元素的方式。

关于CSS - 如何使 div 与包含的子 img 一样宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33634234/