如何溢出Bootstrap內部的圖像

我試圖顯示一個超大的圖像來修復大小爲12的引導行內部。但是每當我這樣做時，圖像都會使行橫跨和外部伸展的屏幕。我希望保持行寬相同，但如果圖像在div內變得太大，它會使用滾動溢出。我應該怎麼做？以下是我得到的代碼。如何溢出Bootstrap內部的圖像

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; 
}

附：我嘗試使用最大寬度，但它不起作用，因爲這只是簡單地限制我的圖像的寬度，以修復裏面沒有滾動條的div。即它不會允許它過大

來源

2017-10-11 Danny

將'image-responsive'類添加到圖像 – Vishnu

@Vishnu感謝您的信息。它有些作品，但它限制了圖像的寬度以修復它？我不想限制圖像的大小，我想讓它可以在我認爲的行div div – Danny

內滾動。示例代碼筆鏈接有解決方案。 https://codepen.io/greatzspido/pen/jGKwNw 和如果標記的最大寬度：100％在您的代碼中，所以重置。 –

我覺得這個例子CodePen鏈接有一個解決方案：https://codepen.io/greatzspido/pen/jGKwNw

做一些檢查也是在你的代碼：

如果img標籤有max-width:100%做了復位。
使用container類添加一個元素來包裝您的內容。

來源

2017-10-11 10:03:20

更改您的CSS代碼如下。

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

來源

2017-10-11 09:34:46 sajee

謝謝，但這沒有奏效。問題是最大寬度 - 它限制了圖像的大小，甚至沒有顯示滾動條，因爲在本例中它甚至不會超過100％的最大寬度。 – Danny

請您提供一個工作小提琴嗎？然後我會幫你解決這個問題。 – sajee

回答

相關問題