如何在Bootstrap行

Question

我试图显示一个超大图像来修复大小为12的引导行。但是每当我这样做时，图像会使行在屏幕上方和屏幕外一直拉伸。我希望保持行宽相同，但如果图像在div内部变得太大，则会使其滚动溢出。我该怎么做？以下是我所拥有的代码。

HTML

<div id="imageRow" class="row">
        <div class="col-md-12">
            <div id='imgContainer' runat="server" class='imgContainer' visible="false">
                <asp:Image runat='server' ID='imgDocument' Visible="false" CssClass='imgDocument clear'/>
            </div>
        </div>
    </div>

CSS

.imgContainer {
    position: relative;
    overflow: scroll;
    width: 100%;
    height: 600px;
}

P.S。我尝试使用Max-width，但它不起作用，因为这只是简单地限制我的图像的宽度来修复div内部没有滚动条。即它不会让它超大

Answer 1

我认为此示例CodePen链接有一个解决方案：https://codepen.io/greatzspido/pen/jGKwNw

还要在代码中进行一些检查：

1. 如果img代码有max-width:100%重置。
2. 添加一个包含container类的元素来包装您的内容。

Answer 2

更改您的CSS代码，如下所示。

.imgContainer {
    position: relative;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
}

Answer 3

我找到了一个更新的解决方案。将此添加到图像：

.image { object-fit: fill; }