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