изображение центра в квадрате отзывчивого контейнера

Question

У меня есть контейнер (.inner). Он содержит квадрат div (.square) и реагирует. Мне нужно, чтобы изображение было вертикально и горизонтально. Я не хочу использовать свойство background url. Мой HTML разметка:

<div class="thumb"> 
    <div class="square"> 
     <a href=""> 
      <img src=""/> 
     </a> 
    </div> 
</div> 

Как мои квадратные работаю в CSS:

.thumb { 
    position: relative; 
    width: 100%; 
    } 

.square{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    overflow:hidden; 
    display: inline-block; 
    vertical-align: middle; 
    } 

На данный момент, я добавил класс к изображению с JavaScript для пейзажных изображений, чтобы соответствовать как портретным и ландшафтным изображениям с помощью CSS на квадратные высоты и ширину контейнеров.

img { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
    } 
img.landscape { 
    max-width: none; 
    height: 100%; 
    width:auto!important; 
    } 

Но у меня нет идей, как их центрировать. Я уже много читал здесь статей, но никто из них не работал. Спасибо за помощь

Вот картина того, что поиск им для, также должны работать по вертикали, если это возможно:

Answer 1

Ваш CSS пытается центрировать .square сам, а не содержащееся изображение. margin: auto; наряду с абсолютным позиционированием изображения делает трюк.

Это простой пример, показывающий, как центрировать; вы можете изменить его в соответствии с вашими потребностями. Прозрачность изображения снижается, чтобы показать, что она центрирована по горизонтали и вертикали внутри контейнера. JavaScript оживляет высоту и ширину контейнера, чтобы имитировать отзывчивость.

http://jsfiddle.net/6py8o6b8/4/

TweenMax.to($(".square"), 2, { 
 
    width: "100%", 
 
    height: "250px", 
 
    repeat: -1, 
 
    repeatDelay: 1, 
 
    yoyo: true, 
 
    ease: "linear" 
 
});

.square { 
 
    border: 2px solid red; 
 
    height: 100px; 
 
    position: relative; 
 
    width: 100px; 
 
    margin: 70px auto; 
 
} 
 
img { 
 
    position: absolute; 
 
    top: -9999px; 
 
    left: -9999px; 
 
    right: -9999px; 
 
    bottom: -9999px; 
 
    margin: auto; 
 
    opacity: 0.5; 
 
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="square"> 
 
    <img src="http://www.collativelearning.com/PICS%20FOR%20WEBSITE/stills%202/black%20screen.jpg" /> 
 
</div>

Answer 2

Есть несколько решений, как в HTML и CSS.

CSS предлагает, как упоминалось выше, свойство отображения, которое отвечает за то, что вы ищете. Попробуйте играть с ним - например:

.MyImageStyle 
{ 
display: block; 
// If this doesn't work, feel free to try inline-block, and the other possibilitys. 
} 

<div class="thumb"> 
<div class="square"> 
    <a href=""> 
     <img src="" class="MyImageStyle"/> 
    </a> 
</div> 

Чем меньше изящным решением в HTML - вы можете использовать тег вокруг изображения, которые могли бы работать в некоторых браузерах на определенный дисплее (но это делает зависят от относительного положения элемента и размера страницы). Хорошая попытка может быть

<center> The rest goes in here </center> 

Удачи вам!

Answer 3

Если вы хотите другой вариант без JavaScript, вы можете попробовать установить Flexbox на контейнере.

Обычно это мой подход для центрирования элементов как по вертикали, так и по горизонтали внутри родительского контейнера.

.thumb { 

    justify-content: center; 
    align-items: center; 
    display: flex; 

} 

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

См http://css-tricks.com/snippets/css/a-guide-to-flexbox/