ブートストラップ行の中でオーバーフローする方法

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.私は最大幅を使ってみましたが、これは単に画像の幅をスクロールバーなしで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%; 
}