Масштабируйте оба изображения в div, чтобы они соответствовали видовому окну

Question

Я хочу, чтобы оба изображения масштабировались вместе и соответствовали видовому экрану.

Я пытался сделать некоторые параметры максимальной ширины, но поскольку изображения имеют разную ширину (одинаковая высота), они масштабируются по-разному.

Вот мой код:

HTML

<div class="container"> 
    <div class="images"> 
    <img src="https://cdn.img42.com/3bb8d43ca012533b5ceb2ac691b7c953.png"> 
    <img src="https://cdn.img42.com/9bc6aad61f6967d1ec85a15dbfc462e0.png"> 
    </div> 
</div> 

CSS

.container { 
    width: 100%; 
    float: left; 
    background:orange; 
} 

.images { 
    width: 100%; 
    margin: 0 auto; 
    text-align:center; 
} 

.images img { 
    display:inline-block; 
} 

http://jsfiddle.net/8fc7hnff/5/

Это должно быть действительно очень легко, но я не могу найти правильное решение.

Спасибо!

Answer 1

Если вы пытаетесь поместить изображения в div, и эти изображения имеют разные аспектные рационы из div, тогда единственная опция - растянуть изображение до тех пор, пока изображение не будет соответствовать размеру div.

Это не хорошо. Скорее всего, изображение будет выглядеть очень плохо. Если это для слайдера или изображающей репрезентативной или символической цели, вы предпочитаете использовать изображения, которые действительно соответствуют div или редактируют изображение таким образом, чтобы оно растягивалось до div. Это правильный способ сделать это.

Однако есть способы убедиться, что соотношение сторон поддерживается. ut делает это делает div's разных размеров.

$(window).load(function() { 
 
    $('.container').find('img').each(function() { 
 
     var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall'; 
 
     $(this).addClass(imgClass); 
 
    }) 
 
})

.container { 
 
    width: 40%; 
 
    height: 40%; 
 
    background: #444; 
 
    margin: 0 auto; 
 
} 
 
.container img.wide { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    height: auto; 
 
} 
 
.container img.tall { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    width: auto; 
 
}

<div class="container"> 
 
<img src="https://cdn.img42.com/3bb8d43ca012533b5ceb2ac691b7c953.png" /> 
 
</div> 
 
<br /> 
 
<br /> 
 
<div class="container"> 
 
<img src="https://cdn.img42.com/9bc6aad61f6967d1ec85a15dbfc462e0.png" /> 
 
</div>