Подгонка объекта CSS: содержит; сохраняет исходную ширину изображения в макете

Я пытаюсь сделать свои изображения отзывчивыми внутри некоторых контейнеров flexbox, используя object-fit: contain, и хотя изображения изменяют размер, макет, похоже, сохраняет исходный размер изображения, вызывая появление полосы прокрутки.

Проверка ширины изображения с помощью Chrome Dev Tools показывает, что ширина по-прежнему равна 1024 (однако высота была уменьшена соответствующим образом).

(Я черпал вдохновение из Автоматическое изменение размера изображения в макете CSS FlexBox и сохранение соотношения сторон? , чтобы добраться до этого момента)

Мне не хватает некоторых дополнительных атрибутов CSS?

JSFiddle: https://jsfiddle.net/w6hgqf18/1/

Подгонка объекта CSS: содержит; сохраняет исходную ширину изображения в макете

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

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

img {
  object-fit: contain;
}

<div class = "page">
  <div class = "main-container">
    <div class = "page-header">
      This is a header
    </div>
    <div class = "half-containers">
      <img src='https://i.imgur.com/tqQvuFr.jpg' />
    </div>
    <div class = "half-containers">
      <img src='https://i.imgur.com/tqQvuFr.jpg' />
    </div>
    <div class = "page-footer">
      This is a footer
    </div>
  </div>
</div>

Не дубликат, на самом деле в моем вопросе использовалась информация, которую я получил из этих ответов на stackoverflow.com/questions/21103622/….

— 27.01.2019 03:19

Согласен, это не дубликат. Там нет ничего, объясняющего, как и почему object-fit так себя ведет. Речь не идет об автоматическом изменении размера изображений, которое уже сделано здесь. речь идет о том, «почему объектная подгонка ведет себя так».

— 27.01.2019 08:44

html css flexbox object-fit

26.01.2019 06:35

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

5 627

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете обернуть img тегом div с width: 100% и установить изображение height на 100% и сделать это без object-fit:

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

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}


.img-container {
  width: 100%;
}

img {
  height: 100%;
}

<div class = "page">
  <div class = "main-container">
    <div class = "page-header">
      This is a header
    </div>
    <div class = "half-containers">
      <div class = "img-container">
        <img src='https://i.imgur.com/tqQvuFr.jpg' />
      </div>
    </div>
    <div class = "half-containers">
      <div class = "img-container">
        <img src='https://i.imgur.com/tqQvuFr.jpg' />
       </div>
    </div>
    <div class = "page-footer">
      This is a footer
    </div>
  </div>
</div>

26.01.2019 07:13

Ответ принят как подходящий

То, что у вас есть, логично, вам просто нужно понять, как работает object-fit. Начнем с более простого примера:

.box {
  width:300px;
  height:300px;
  border:1px solid;
}
img {
 width:100%;
 height:100%;
 object-fit:contain;
}

<div class = "box">
  <img src = "https://picsum.photos/300/200?image=1069">
</div>

Как вы можете видеть, я использовал изображение 300x200, которое я растягиваю внутри блока 300x300, таким образом, я нарушаю его соотношение, и если вы проверите ширину/высоту изображения, вы увидите, что оно Размерность по-прежнему 300x300 (размерность до подачи заявки object-fit).

Из спецификация:

The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

По сути, мы визуально изменяем содержимое изображения, чтобы оно соответствовало пространству, установленному изображением. object-fit не изменяет размер изображения, а использует этот размер как ссылку для изменения содержимого внутри.

Возьмем тот же пример, но вместо этого используем 50%:

.box {
  width:300px;
  height:300px;
  border:1px solid;
}
img {
 width:50%;
 height:50%;
 object-fit:contain;
}

<div class = "box">
  <img src = "https://picsum.photos/300/200?image=1069">
</div>

Теперь изображение имеет размер 150x150 и внутри него мы меняем содержимое, чтобы получить эффект содержать.

Та же логика будет происходить со всеми значениями

.box {
  width:300px;
  height:300px;
  border:1px solid;
}
img {
 width:50%;
 height:50%;
}

<div class = "box">
  <img src = "https://picsum.photos/300/200?image=1069" style = "object-fit:contain;">
</div>
<div class = "box">
  <img src = "https://picsum.photos/300/200?image=1069" style = "object-fit:cover;">
</div>

В вашем примере у вас то же самое. без object-fit картинка как ниже

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

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

img {
  /*object-fit: contain;*/
}

<div class = "page">
  <div class = "main-container">
    <div class = "page-header">
      This is a header
    </div>
    <div class = "half-containers">
      <img src='https://i.imgur.com/tqQvuFr.jpg' />
    </div>
    <div class = "half-containers">
      <img src='https://i.imgur.com/tqQvuFr.jpg' />
    </div>
    <div class = "page-footer">
      This is a footer
    </div>
  </div>
</div>

Добавление object-fit не изменит его размер, а только то, что мы видим:

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

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

img {
  object-fit: contain;
}

<div class = "page">
  <div class = "main-container">
    <div class = "page-header">
      This is a header
    </div>
    <div class = "half-containers">
      <img src='https://i.imgur.com/tqQvuFr.jpg' />
    </div>
    <div class = "half-containers">
      <img src='https://i.imgur.com/tqQvuFr.jpg' />
    </div>
    <div class = "page-footer">
      This is a footer
    </div>
  </div>
</div>

Теперь другая проблема заключается в том, что ваше изображение имеет ширину 1024px, а гибкие элементы не будут выходить за пределы размера содержимого из-за ограничения min-width, поэтому вам нужно добавить для получения необходимого эффекта min-width:0. При этом у вас больше не будет проблем с переполнением, тогда ваше изображение будет содержаться внутри области, определенной макетом flexbox.

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

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  min-width: 0; /*added*/
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

img {
  object-fit: contain;
  min-width: 0; /*added*/
}

<div class = "page">
  <div class = "main-container">
    <div class = "page-header">
      This is a header
    </div>
    <div class = "half-containers">
      <img src='https://i.imgur.com/tqQvuFr.jpg' />
    </div>
    <div class = "half-containers">
      <img src='https://i.imgur.com/tqQvuFr.jpg' />
    </div>
    <div class = "page-footer">
      This is a footer
    </div>
  </div>
</div>

Вы также можете получить тот же результат, учитывая background-image и background-size:contain, где вам больше не нужно возиться с ограничением min-width, поскольку контента больше нет.

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

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
  background:url(https://i.imgur.com/tqQvuFr.jpg) center/contain no-repeat;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

<div class = "page">
  <div class = "main-container">
    <div class = "page-header">
      This is a header
    </div>
    <div class = "half-containers">
    </div>
    <div class = "half-containers">
    </div>
    <div class = "page-footer">
      This is a footer
    </div>
  </div>
</div>

Хороший ответ. Я просто хочу, чтобы мы могли заставить img обновить свой внутренний размер (в данном случае ширину), чтобы отразить уменьшенное содержимое, чтобы не было дополнительных «отступов».

— 27.03.2019 21:11

26.01.2019 09:42