html - 如何将图像宽度设置为 Bootstrap 列的宽度

Question

这感觉像是一个非常简单的问题，我正在绞尽脑汁。我有 3 张图像，我想以某种方式显示它们。基本上我想要一个图像适合 col-md/sm/xs-7 和 2 个图像堆叠在另一个自动适应 col-md/sm/xs-3 的顶部。全部包裹在两侧的 col-md/sm/xs-1 之间。

我不知道我需要什么 CSS 来告诉图像调整到列的大小。有什么想法吗？

Answer 1

是这样的吗？

<div class="row">
    <div class="col-md-7">
        <image class="img-responsive" src="largeimage.jpg" width="200" height="400"/>
    </div>
    <div class="col-md-5">
        <div class="row">
            <div class="col-md-3">
                <image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <image class="img-responsive" src="yourSmallImage.jpg"  width="200" height="200"/>
            </div>
        </div>
    </div>
</div>

我不太明白您尝试排列图片的确切方式，但我认为这应该对您有所帮助。如果你给我画一张你想要图片排列方式的图片，我会为你量身定制我的答案。

编辑:好的，我想我现在可能(？)明白了，这就是我的解决方案。您必须按照自己的方式调整图像的大小。或者，希望它们已经是您想要的尺寸并且会很合身。试一试。