Центрирование отзывчивого изображения на CSS
Центрирование <img> по вертикали и горизонтали, сохраняя при этом соотношение сторон, гарантируя, что изображение остается в пределах родителя. исключительно средствами CSS ....
HTML
<div class="nilsamdertuv">
<div class="nilsamdertuv_tedsamilha">
<img src="http://zornet.ru/ABVUN/img4.jpg">
</div>
</div>
CSS
.nilsamdertuv {
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
background: rgba(57, 70, 78, 0.8);
}
.nilsamdertuv_tedsamilha {
width: 0;
height: 0;
}
.nilsamdertuv img {
position: absolute;
max-width: 100%;
max-height: 100%;
-webkit-transform: translate(-49%, -49%);
transform: translate(-49%, -49%);
-moz-box-shadow: 0 11px 15px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 11px 15px 0 rgba(12, 12, 12, 0.34);
box-shadow: 0 11px 15px 0 rgba(14, 14, 14, 0.34);
}