CSS-подбор объекта: содержать;сохраняет оригинальную ширину изображения в макете - PullRequest
Новая
       87

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

0 голосов
/ 26 января 2019

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

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

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

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

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

problem

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>

Ответы [ 2 ]

0 голосов
/ 26 января 2019

То, что у вас есть, логично, вам просто нужно понять, как работает 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).

С Спецификация :

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

По сути, мы визуально изменяем содержимое изображения, чтобы оно соответствовало пространству, установленному изображением. 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, а элементы flex не будут растягиваться по размеру его содержимого из-за ограничения 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>
0 голосов
/ 26 января 2019

Вы можете обернуть тег 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...