Почему изображение ведет себя необычно в контейнере с использованием flexbox? 

Как можно объяснить ситуацию, при которой при уменьшении экрана изображение не сжимается, если оно не обернуто в дополнительный контейнер? В первом случае (card-1), когда картинка находится в div, все работает как ожидается. Однако, во втором (card-2) и третьем (card-3) примерах это не происходит. Каким образом можно исправить данное поведение?
  • 14 июня 2024 г. 13:21
Ответы на вопрос 2 
Вероятно, причина такого поведения заключается в том, что изображение не является элементом, который по умолчанию поддерживает свойства flexbox. Поэтому, если изображение обернуто в дополнительный контейнер (например, div), этот контейнер будет рассматриваться как элемент flexbox, а изображение будет его потомком и изменять свои размеры в соответствии с правилами flexbox.

Чтобы исправить данное поведение, можно добавить свойство "flex: 1" к изображению напрямую (например, img {flex: 1;}), чтобы указать, что оно должно занимать все доступное пространство внутри своего родительского контейнера flexbox и изменять свои размеры соответственно.

Пример:

```css
.card-2, .card-3 {
  display: flex;
}

.card-2 img, .card-3 img {
  flex: 1;
}
```

Таким образом, изображение будет сжиматься и увеличиваться в размере вместе с изменением размеров экрана, как и ожидалось.
Тоже страдал от такой штуки. И даже спрашивал как-то на хабре и мы анализировали с топом. 
 Короче если у картинки есть родитель с каким-то фиксированным рамером - она заполнит его. 
 Если нет  (независимо от того, есть ли выше у предков какой-то фикс размер) - она будет считать эти проценты от самой себя. Т.е если оригинал картинки допустим 2000х1000пх и мы поставим ей width:100% или max-width:100% в стилях - она не будет заполнять 100% доступного места от родителя, а будет показывать 100% от своего оригинального размера. Т.е 2000х1000пх 
 
 И даже если у картинки будет обёртка, размер обёртки будет зависеть от размера картинки, а не от того, что ты зада в стилях этой обертке. Поэтому лично я использую обертку как relative , а картинку как absolute со значениями WH:100% 
 
 
 Такая вот шляпа. 
 
 Поэтому я в любом своём проекте никогда не вставляю картинки без обёртки. Только если у них фикс.размер по макету. 
 
 Ещё в качестве примера могу показать своё: 
 
 На первый взгляд, тут у родителя нет фикс. размера, однако все картинки адекватно вебя ведут... Но не тут то было. CSS правило aspect-ratio: 1/1; у обертки, делает этой обёртке фикс размер, т.к по итогу браузер пересчитывает это в пиксели)) Стоит его убрать - картинки пойдут по п. Я искал инфу по этому поводу в спецификации и тд., но чет не нашел. Методом тыка напоролся, поборолся, понял что нифига не выйдет с этим сделать и принял так, как оно есть. 
 
 Так что как итог и ответ: Она и не должна сжиматься без родителя с фикс размером, т.к ориентируется на свой собственный размер.
Похожие вопросы
    Показать ещё