2

Как сделать чтобы картинка оставалась одного размера, а когда меняется размер контейнера в котором она находится чтобы обрезалась картинка не внизу и слева, а одинаково со всех сторон?

1
  • Покажите код. Вы используете bootstrap?
    – Ver Nick
    6 сен 2018 в 11:02

1 ответ 1

3

Пример с фоном, свойство background-size: cover;

.backgroundSize {
    width: 60vh;
    height: 40vh;
    border: 2px solid #000;
    background: url('https://l2banners.ru/img/video_prew/orbis.jpg') no-repeat center center;
    background-size: cover;
}
<div class="backgroundSize"></div>

Тоже самое но с тегом img, свойство object-fit: cover;

.objectFit__img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  width: 60vh;
  height: 40vh;
}
<div class="objectFit">
  <img src="https://l2banners.ru/img/video_prew/orbis.jpg" class="objectFit__img">
</div> 

Пример без изменения размера самой картинки, только центрирование и обрезка со всех сторон которые не помещаются:

.backgroundSize {
    width: 60vh;
    height: 40vh;
    border: 2px solid #000;
    background: url('https://l2banners.ru/img/video_prew/orbis.jpg') no-repeat center center;
}
<div class="backgroundSize"></div>

Тоже самое с тегом img (одна из возможных реализаций):

.object {
  width: 60vh;
  height: 40vh;
  position: relative;
  overflow: hidden;
}

.object__img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
<div class="object">
  <img src="https://l2banners.ru/img/video_prew/orbis.jpg" class="object__img">
</div>

Ваш ответ

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

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