html - 如何在 Bootstrap 行内溢出图像

Question

我试图显示一个超大图像以固定在 bootstrap 行内，大小为 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;
}

附言我尝试使用 Max-width，但它不起作用，因为这只会限制我的图像宽度以固定在没有滚动条的 div 内。 IE。它不会让它变大

Answer 1

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

也在你的代码中做一些检查:

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