0

Как в css можно разместить изображение так, чтобы при любом размере (даже в ситуациях, когда оно более блока, в который вложено), центр этого изображения совпадал с центром блока?

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

3
  • Поместить его в фон?
    – Qwertiy
    22 сен 2017 в 8:06
  • background: url(..путь к изображению) no-repeat 50% 50%
    – slippyk
    22 сен 2017 в 8:09
  • @quertiy В фон помещать нельзя, так как есть элементы, выходящие за пределы блока, в который вложено изображение, и в этом случае они будут обрезаться.
    – nup
    22 сен 2017 в 8:14

4 ответа 4

1

Если решение с фоновой картинкой не подходит, а нужно позиционировать именно изображение внутри контейнера, то можно поступить так:

<style>
    .container {
        width: 300px;
        height: 1700px;
        overflow: hidden;
        position: relative;
        outline: solid 1px;
    }

    img {
        position: absolute;
        top: calc(50% - 500px);
        left: calc(50% - 500px);
    }
</style>

<div class="container">
    <img src="https://worldarchery.org/sites/default/files/imce/images/target_recurve.png" alt="">
</div>

500px - половина высоты и ширины изображения.

1

Пожалуй добавлю еще один ответ.Есть специальное свойство, которое работает как backgroud-size: cover, в случае когда картинка задана фоном. Единственный минус в поддержке браузерами. http://caniuse.com/#feat=object-fit

.wrap {
  width: 100%;
  height: 500px;
  border:1px solid #000;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="wrap">
  <img src="http://ak-hdl.buzzfed.com/static/enhanced/webdr05/2013/9/17/5/enhanced-buzz-1492-1379411828-15.jpg" alt="">
</div>

1
  • поддержка не очень хорошая - caniuse.com/#feat=object-fit хотя неплохое свойство
    – hug
    22 сен 2017 в 10:36
0

.wrap {
  width: 100%;
  height: 500px;
  overflow: hidden;
  border:1px solid #000;
}

img {
  display: block;
  position: relative;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
<div class="wrap">
  <img src="http://ak-hdl.buzzfed.com/static/enhanced/webdr05/2013/9/17/5/enhanced-buzz-1492-1379411828-15.jpg" alt="">
</div>

0

Никто не предлагает display: flex Печально. А ведь, 2017 год на носу.

.img_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img_wrapper img {
    max-width: 100%;
    max-height: 100%;
}

Для <div class="img_wrapper"><img ... /></div>

2
  • такой вариант масштабирует изображение если оно больше чем .img_wrapper
    – Влад
    25 сен 2017 в 12:11
  • @Влад да. Изображение не может быть шире 100% ширины родительского блока или выше 100% его высоты. Пропорции изображения сохраняются 25 сен 2017 в 21:23

Ваш ответ

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

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