0

Нужно картинку любых размеров заставить сидеть в центре div с заданным размером.

Пытаюсь сделать так (CodePen)

HTML

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="cell">
        <img class="img-responsive" src="http://cdn.sstatic.net/stackoverflow/img/logo.png" alt="">
      </div>
    </div>
  </div>
</div>

CSS

.cell {
  width: 100px;
  height: 100px;
  border: 1px solid #E9E8E2;
  display:flex;
  align-items:center;
}

Результат в разных браузерах удивляет.

IE 11:

введите сюда описание изображения

FF 43

введите сюда описание изображения

Safari 7.1

введите сюда описание изображения

И лишь Chrome даёт желаемый результат

Chrome 47

введите сюда описание изображения

Как кроссбраузерно централизовать картинку (любого размера) внутри div?

3 ответа 3

2

такой вариант подойдет?

.block {
  display: table;
  text-align: center;
  width: 100%;
  width: 100px;
  height: 100px;
  border: 1px solid #E9E8E2;  
}
.block-cell{
  display: table-cell;
  vertical-align: middle;
}
.block-cell img{  
  max-width: 100%;
  width: 100%;
}
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="block">
       <div class="block-cell"> <img class="img-responsive" src="http://cdn.sstatic.net/stackoverflow/img/logo.png" alt="">
         </div>
      </div>
    </div>
  </div>
</div>

5
  • Вы указали размер блока в 100x100, но граница выглядит прямоугольной. У вас это выглядит квадратно?
    – LEQADA
    23 янв 2016 в 7:45
  • @LEQADA поправил
    – soledar10
    23 янв 2016 в 7:47
  • В FF 43 всё равно прямоугольник.
    – LEQADA
    23 янв 2016 в 7:47
  • width 100% для img необходимо еще задать
    – soledar10
    23 янв 2016 в 7:49
  • Теперь выглядит отлично :). Спасибо
    – LEQADA
    23 янв 2016 в 7:51
0

http://caniuse.com/#search=flex

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
  max-height: 100%;
}
<div class="container">
  <img src="http://ipic.su/img/img7/fs/100x100falloutav-vb.1453536215.gif">
</div>

3
  • У вас картинка выйдет за границы блока, если её размер превосходит размер блока.
    – LEQADA
    23 янв 2016 в 8:14
  • Исправил, теперь не выйдет. 23 янв 2016 в 8:20
  • На IE11 выглядит так i.stack.imgur.com/5dWoe.png А на Safari 7.1 выглядит так же, как и в вопросе.
    – LEQADA
    23 янв 2016 в 8:25
-1

Пример:

.col-md-12 {
  width: 500px;
  height: 500px;
  border: 1px solid #E9E8E2;
  position: relative;
}
.cell {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
<div class="container">
  <div class="col-md-12">
    <div class="cell">
      <img class="img-responsive" src="http://cdn.sstatic.net/stackoverflow/img/logo.png" alt="">
    </div>
  </div>
</div>

5
  • Но у тебя тут бутстрап я виду, поэтому просто добавь клас .text-center
    – mprogu
    23 янв 2016 в 6:53
  • text-center централизует во горизонтали. Всего лишь text-align:center. Как вы предлагаете это применять?
    – LEQADA
    23 янв 2016 в 7:17
  • А чем не устраивает вариант выше ?
    – mprogu
    23 янв 2016 в 7:23
  • Проблема в том, что в вашем примере, если картинку сделать размером в блок, то он будет посередине. Это не то, чего я пытаюсь добиться. Мне нужно, чтобы конкретно в данном блоке картинки любого размера централизовались вертикально. Если картинка сама подходит по размерам бока, то она будет выглядеть во весь блок. Как если бы в примере из вопроса вместо логотипа сайта подставить картинку 100x100 и посмотреть на это в Chrome
    – LEQADA
    23 янв 2016 в 7:46
  • Спасибо вам за попытку) Минус, кстати, не мой.
    – LEQADA
    23 янв 2016 в 7:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.