<img> 할당 된 공간을 커버

Question

나는 페이지를 가로 질러 3 개의 이미지를 가로 지르는 것을 시도했다. 나는이 같은 CSS가 background-size: cover;처럼 행동해야합니다. 두 개의 외부 이미지는 종횡비가 높이가 빈 공간을 채울 수 있기 때문에 정상적으로 작동합니다. 그러나 곰 그림은 가로 세로 비율 때문에 동일한 동작을 복제하지 않습니다.

이 사진이 상자의 전체 높이에 도달 할 때까지 스트레칭해야합니다. 상자 너비를 초과하면 초과 금액은 overflow: hidden;으로 숨겨집니다. 마음에 응답하는 방법은 이러한 목표를 달성 할 것입니다 여기에

내 코드입니다 (창 크기를 조정할 때) 이미지 (% 확장은.) : HTML :

<section> 
    <div class="albumns"> 
     <article> 
      <div class="albumn a1"> 
       <%=image_tag("mount.jpg")%> 
      </div> 
     </article> 
     <article> 
      <div class="albumn a2"> 
       <%=image_tag("bear.jpg")%> 
      </div> 
     </article> 
     <article> 
      <div class="albumn a3"> 
       <%=image_tag("mount.jpg")%> 
      </div> 
     </article> 
    </div> 
</div> 
</section> 

CSS :

.albumns { 
position: relative; 
} 
.albumn { 
width: 100%; 
float: none; 
& img { 
    width: 100%; 
} 
} 

Answer 1

이미지가 가변 높이이므로 컨테이너의 높이를 고정해야합니다. 시도해보십시오.

.albumn{ 
    overflow:hidden; 
    width:33%; 
    height:200px; /*The height you want the images*/ 
} 
.albumn img{ 
    height:100%; 
    width:auto; 
    display:block; 
    margin:0 auto; 
}