CSS Ширина и высота изображения изображения

Question

Я пытаюсь сделать изображение подходящим для его контейнера. Проблема в том, что я могу установить только ее ширину width: 100% или высоту height: 100%, но не обе.

В основном, он должен проверять длину или высоту контейнера для погодных условий по сравнению с шириной и высотой изображения (нормализован) и адаптировать к этому. И он должен также центрировать изображение.

Это стандартное поведение в Windows Photo Viewer. Изображение всегда видно, центрируется и сохраняет соотношение. Я пытаюсь сделать это именно так.

PS: Я бы предпочел решение css. Но если это невозможно/очень болезненно, js тоже нормально.

PSPS: Извините, если это дубликат. Я обыскал интернет и нашел похожие вопросы, но ни один из них, казалось, не имел правильного ответа.

Answer 1

Вы можете установить изображение с помощью CSS background-image, как это:

div{ 
    width: 200px; 
    height: 200px; 
    background-image: url("http://i.imgur.com/cjgKmvp.jpg"); 
    background-size: contain; 
    background-repeat: no-repeat; 
} 

DEMO: https://jsfiddle.net/ue49awaL/8/

Answer 2

Есть несколько решений в этом. Ни один из них не идеален. И обычно это зависит от того, хотите ли вы обрезать изображение или нет.

Если вы хорошо с кадрирование, вы можете попробовать что-то вроде:

<div class="image"></div> 
<style> 
    .image { 
      width:250px; 
      height:150px; 
      background-image:url('http://lorempixel.com/400/200/'); 
      background-size:cover; 
    } 
</style> 

Если вы не хотите, чтобы обрезать, то это будет зависеть, как вы хотите, чтобы выложить изображение (или изображения). Вот несколько примеров:

• http://healy.rocks/gallery1 - Отзывчивый галерея макет
• http://healy.rocks/gallery2 - Pinterest CSS макет с mansonry.js
• http://healy.rocks/gallery3 - Простая строка CSS макет
• http://healy.rocks/gallery3b - Google макет изображения CSS WTH rowGrid.js