Центрирование изображения относительного размера

Question

У меня есть квадратное изображение, которое я хочу сосредоточить на экране. Проблема в том, что я хочу, чтобы изображение оставалось квадратом, составляя не более 80% ширины и высоты. Я использовал следующий код, который делает мое изображение 80% высоты (когда высота < ширина), и центрирует изображение по вертикали, но не горизонтально, конечно. При использовании фиксированной ширины я мог бы использовать margin-left: 50%; margin-right: 50%, но с относительным размером, это установило бы левую часть изображения на 50%. Есть идеи?

.my_img{ 
 
    max-width: 80%; 
 
    max-height: 80%; 
 
    margin-left: 10%; 
 
    margin-top: 10%; 
 
}

Answer 1

Попробуйте это:

.my_img_container { 
    position: relative; 
} 
.my_img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%) 
} 

Вот скрипку: http://jsfiddle.net/l0wskilled/voubtxrt/

Answer 2

Вы также можете попробовать:

<div class="container"> 
    <img src="https://www.webkit.org/blog-files/acid3-100.png" class="my_img" /> 
</div> 

С стилем:

.my_img { 
    max-width: 80%; 
    max-height: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
} 

Я думаю, что это то, что вы хотели в любом случае, может быть, я не прав! https://jsfiddle.net/dLozvcmo/2/

Answer 3

, если изображение имеет display: block, то вы можете, вероятно, использовать margin: auto auto и удалить% прибыли. Если его display равен inline или inline-block, вы можете использовать text-align: center на родительском элементе изображения, чтобы сделать его горизонтально центрированным. Я не тестировал этот код. Если это не работает, и у вас нет проблем с jQuery, это можно сделать с помощью нескольких строк jQuery.