3

Нужно вписать изображение в div фиксированного размера, но так, чтобы больший размер изображения занимал 100% div'а, а меньший - сколько получится. Если подгонять только один фиксированный размер, то это выглядит так

  div {
    width: 125px;
    height: 70px; 
  }
  div img {
    width: 100%;
    height: auto;
  }

Но если у изображения высота больше, чем ширина, то получается швах. Решается ли проблема на CSS?

1
  • Первое что приходит в голову - всё таки js, не уверен что этот вопрос можно решить с помощью css, хотя ответ показывает как можно сделать небольшой "костыль": кладите в родительский блок другой div и вставляйте нужную картинку фоном. 30 июл 2017 в 10:11

3 ответа 3

3

Если я правильно понял вопрос, то вам нужно свойство background-size. Например:

div {
    background: url(/example/image/mybg.png) 100% 100% no-repeat;
    background-size: contain;
}

cover

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

contain

Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Источник: https://webref.ru/css/background-size


А если именно с тегом img нужно, то может такое решение устроит?

.ex1 {
  width: 70px;
  height: 125px;
}

.ex2 {
  width: 125px;
  height: 70px;
}

div {
  border: 1px solid #ccc;
  display: inline-block;
  margin: 10px;
  position: relative;
}

div img {
  position: absolute;
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}
<div class="ex1"><img src="http://lorempixel.com/100/70/" alt=""></div>
<div class="ex2"><img src="http://lorempixel.com/100/70/" alt=""></div>
<div class="ex1"><img src="http://lorempixel.com/70/100/" alt=""></div>
<div class="ex2"><img src="http://lorempixel.com/70/100/" alt=""></div>

4
  • Я так думаю, что нужно работать с тегом img и вы неправильно поняли вопрос. 30 июл 2017 в 10:09
  • Добавил к ответу еще решение. Что думаете?
    – Romchik
    30 июл 2017 в 10:27
  • Неплохое решение, думаю должно подойти 30 июл 2017 в 10:36
  • Спасибо. Остановился на диве с бэкграундом. Только с той поправкой, что position указал 50%, а не 100 30 июл 2017 в 12:18
3

Можно еще проще, с object-fit: contain. Тогда изображение автоматически центрируется. Замена на object-fit: cover растянет картинку на весь блок, тоже с автоматическим центрированием.

div img {
  width: 100%;
  height: 100%;
  object-fit:contain;
}

.ex1 {
  width: 70px;
  height: 125px;
}

.ex2 {
  width: 125px;
  height: 70px;
}

div {
  border: 1px solid #ccc;
  display: inline-block;
  margin: 10px;
  position: relative;
}

div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

div.cover img {
  object-fit: cover;
}
<div class="ex1"><img src="http://lorempixel.com/300/140/" alt=""></div>
<div class="ex2"><img src="http://lorempixel.com/300/140/" alt=""></div>
<div class="ex1"><img src="http://lorempixel.com/140/300/" alt=""></div>
<div class="ex2"><img src="http://lorempixel.com/140/300/" alt=""></div>
<br>
<div class="ex1 cover"><img src="http://lorempixel.com/300/140/" alt=""></div>
<div class="ex2 cover"><img src="http://lorempixel.com/300/140/" alt=""></div>
<div class="ex1 cover"><img src="http://lorempixel.com/140/300/" alt=""></div>
<div class="ex2 cover"><img src="http://lorempixel.com/140/300/" alt=""></div>

1
1

Вариант с ответом Romchik, но без абсолютного позиционирования (расположение за счёт flexbox):

.ex1 {
  width: 70px;
  height: 125px;
}

.ex2 {
  width: 125px;
  height: 70px;
}

div {
  border: 1px solid #ccc;
  margin: 10px;
  
  /* сделать inline flex-контейнером */
  display: inline-flex;
  /* центрировать элементы горизонтально */
  justify-content: center;
  /* центрировать элементы вертикально */
  align-items: center;
}

div img {
  max-height: 100%;
  max-width: 100%;
}
<div class="ex1"><img src="https://i.stack.imgur.com/8w5wV.jpg" alt=""></div>
<div class="ex2"><img src="https://i.stack.imgur.com/8w5wV.jpg" alt=""></div>
<div class="ex1"><img src="https://i.stack.imgur.com/bkg7V.jpg" alt=""></div>
<div class="ex2"><img src="https://i.stack.imgur.com/bkg7V.jpg" alt=""></div>

Ваш ответ

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

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