Масштабирование изображений разного размера с помощью Bootstrap / CSS

Question

У меня есть такой макет веб-приложения, стилизованный под Bootstrap:

------------------------
|        Header        |
------------------------
|     Display Area     |
------------------------

. Заголовок представляет собой набор элементов управления (в основном, кнопок) и, следовательно, почти одинаковой высоты.

Область отображения содержит следующее:

<div class="row">
  <div class="col">
    <img class="img-fluid" src="http://localhost/api/currentImage" />
  </div>
</div>

http://localhost/api/currentImage возвращает изображение. Размер изображения всегда различается: иногда ширина больше высоты, иногда наоборот.

Теперь я бы хотел масштабировать изображение таким образом, чтобы оно максимально использовало доступный дисплей без «переполнения». ». Под переполнением я подразумеваю, что никогда не нужно показывать горизонтальную или вертикальную полосу прокрутки, потому что изображение слишком широкое или слишком высокое. Прямо сейчас, <img class="img-fluid" ... только правильно масштабирует ширину.

Как мне добиться этого с помощью Bootstrap / CSS?

Answer 1

Bootstrap позволит вам изменять размеры изображений с помощью класса img-fluid, но если вам нужно, чтобы изображение занимало все пространство, вам нужно было бы написать свой собственный CSS, вы можете использовать свойство object-fit, чтобы установитьизображение, чтобы заполнить контейнер, сохраняя при этом его пропорции и обрезая при необходимости;

Как вы можете видеть в приведенном ниже примере, изображение узкое, но оно заполнит весь контейнер, даже если его придется расширить

РЕДАКТИРОВАТЬ: включены еще два примера с fill и contain, чтобы вы могли видеть, как меняется их поведение.

header {
  border: 1px solid red;
  padding: 10px;
}

section {
  border: 1px solid blue;
}

img {
  height: calc(100vh - 20px);
  width: 100%;
  /* This is just to remove a blank space at the bottom of the image */
  display: block;
}

img.cover {
  object-fit: cover;
}

img.contain {
  object-fit: contain;
}

img.fill {
  object-fit: fill;
}

<header>
  This is a header
</header>

<section>
  <img class="cover" src="https://via.placeholder.com/200x700" />
</section>

<section>
  <img class="contain" src="https://via.placeholder.com/200x700" />
</section>

<section>
  <img class="fill" src="https://via.placeholder.com/200x700" />
</section>

Answer 2

Bootstrap имеет предопределенные классы для адаптивного изображения. Проверьте следующий класс,

.img-responsive Делает изображение отзывчивым (будет хорошо масштабироваться по отношению к родительскому элементу)

<div class="row">
  <div class="col">
    <img class="img-fluid img-responsive" src="http://localhost/api/currentImage" />
  </div>
</div>

`