ブートストラップレスポンスイメージが親の高さにフィットし、全幅が伸びる

Question

私はある高さ（例えば600px）の行を持っていて、この行にimg（サイズ1920x1080）をフィットさせたいと思います。高さを超えている。

つまり、画像の高さの600pxのみを表示する必要があります（残りは切り捨て、隠しなどが可能です）。また、行の幅に対応した状態を維持する必要があります。説明するために、赤、国境内の一部のみが表示される必要があります。

を私が午前問題は「IMG-流体」は常にコンテナの小さい高さに画像を適合することであり、したがって縮小しますアスペクト比を維持するための幅。 img-fluidがないか、またはイメージに固定された高さを追加すると、アスペクト比が失われ、イメージが行コンテナに「押し込まれる」。私のコード：それは容器の外のimgをスケーリング続け、Constraining image height with bootstrap responsive image?が、うまくいきませんでした：

.img-400 { 
 
    height: 400px !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row img-400"> 
 
    <div class="col-12"> 
 
     <img src="https://image.ibb.co/iG8OSb/dogs.jpg" class="img-fluid" /> 
 
    </div> 
 
    </div> 
 
</div>

注意私はこの1つを試してみました。こんにちははこの1つを試してみてください

Answer 1

、

.img-400 img{ width: 100% ; } 

希望はこのことができます:)

Answer 2

.imgの流体が操作されない場合は、上記のソリューションは、動作します：

.img-400 { 
 
    height: 400px; 
 
    overflow: hidden; 
 
}