부모 높이에 맞는 부트 스트랩 반응 이미지

Question

필자는 특정 높이 (예 : 600px)의 행을 가지고 있으며이 행에 img (1920x1080 크기)를 맞추기를 원합니다. 높이를 초과했습니다.

즉, 이미지의 높이 만 600 픽셀 (나머지는 잘림, 숨김 등)으로 표시되어야하며 행 너비에 반응해야합니다. 설명하기 위해, 빨간 국경 내에서만 부분은 표시해야합니다 :

을 나는 데 문제는 "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>

참고 나는이 일을 시도했다. 안녕하세요이 하나를 시도

Answer 1

,

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

희망이 도움이 :)

Answer 2

.IMG 유체가 조작되지 않은 경우 위의 솔루션은 작동합니다

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