Почему обтекание изображения с помощью div в flexbox корректно масштабирует его, а img item не масштабирует? - PullRequest
Новая
       9

Почему обтекание изображения с помощью div в flexbox корректно масштабирует его, а img item не масштабирует?

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

Мне интересно, почему упаковка img flex-элементов в div s приведет к их правильному масштабированию, но только img элементов - нет.

Если вы извлечете этот JSFiddle , вы увидите, что перенос изображения в div работает, как это было предложено в других публикациях в StackOverflow, но, похоже, не работает иначе. И align-self ничего не меняет, как предложено здесь . Я попытался align-items, чтобы он переопределил значение по умолчанию stretch, но это не работает. Я также попытался очистить значения min-height и min-width, поскольку они по умолчанию установлены на auto. Этот ответ оправдывает использование оболочки div, за исключением того, что он не объясняет , почему работает для div элементов flexbox, а не для img элементов напрямую.

Вот немного HTML: 

 .stack {
      display:flex;
      max-width:600px;
      align-items:center;  /* this does not cause image tags to resize */
    }
    .stack img {
       min-height:0;
       min-width:0;
       height:auto;
       align-self:center;
    }
    .test img {
      width:100%;
    }
<div class="stack">
  <div class="test">
    <img src="https://placehold.it/200x200/E8117F/FFFFFF"/> 
    <!--Wrapping in a div works-->
  </div>

  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
</div>

Почему, казалось бы, единственное решение обернуть изображение div? Я не понимаю, почему единственный способ правильно масштабировать изображение - через оболочку div.

Ответы [ 3 ]

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

Делает ли это то, что вам нужно?

Markup: 

<body>
  <div class="stack">
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
    </div>
</body>

CSS: 

.stack {
  display:flex;
}
.stack img {
   align-self:center;
   width: 100px;
}

https://jsfiddle.net/zbac1dxe/6/

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

Изображения растягиваются, потому что значение по умолчанию для align-self равно 'stretch'. Чтобы сохранить пропорции, установите align-self в «center». Я обновил ваш фрагмент кода, чтобы продемонстрировать это.

Имейте в виду, что у вас есть 5 изображений с шириной 200 пикселей, а ширина контейнера определена как 600 пикселей, поэтому правильное отображение изображений с разрешением 200x200 приводит к тому, что контейнер отображает горизонтальную полосу прокрутки.

Пожалуйста, посмотрите этот вопрос StackOverflow: Почему flexbox растягивает мое изображение? 

 .stack {
      display:flex;
      max-width:600px;
    }
    .stack img {
        align-self: center;
    }
<div class="stack">
  <div class="test">
    <img src="https://placehold.it/200x200/E8117F/FFFFFF"/> 
    <!--Wrapping in a div works-->
  </div>

  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
</div>
0 голосов
/ 08 января 2019

с CSS flexbox , вам нужно обратиться к дочернему элементу напрямую из родительского элемента-переносчика.

В вашем примере, чтобы предотвратить повторение <div><img><div> структуры, вы просто удаляете <div class="test"></div>.

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

.stack {
  display: flex;
  max-width: 600px;
  align-items: center;
  border:1px solid gold;
}

.stack img {
  min-height: 0;
  min-width: 0;
  height: auto;
  width:200px;
  align-self: center;
}

.test img {
  width: 100%;
}

.test:nth-of-type(1) {
  border: 2px solid #000;
}
<body>
  <div class="stack">
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
  </div>
</body>

Измените размер браузера, чтобы он работал ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...