Код, копия на jsfiddle
html,
body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.table__cell {
display: table-cell;
vertical-align: middle;
}
img {
display: block;
max-width: 100%;
margin: 0 auto;
}
<div class="table">
<div class="table__cell">
<img src="http://placehold.it/750x350" alt="">
</div>
</div>
Там использован стандартный прием с display:block; и max-width:100% для изображений:
img {
display: block;
max-width: 100%;
}
Если увеличивать/уменьшать ширину контейнера, то изображение уменьшает/увеличивает свою ширину и одновременно пропорционально уменьшает/увеличивает свою высоту. Это очень крутая особенность изображений, много где выручает.
Как сделать так, чтобы при увеличении/уменьшении высоты контейнера, изображение вело себя подобно первому случаю: высота изображения становилась равна высоте контейнера и ширина изображения тоже пропорционально уменьшалась/увеличивалась? Как это сделать без Яваскрипта? (Как сделать с Яваскриптом я знаю.) Можно использовать самые новомодные CSS3 штуки.