@redfoxy19733

Почему изображение (img) в flex-контейнере ведет себя «странно»?

Не могу понять, почему при уменьшении экрана изображение не сужается? Есть три img для примера. В первом варианте (card-1) с картинкой обвёрнутой в див - все понятно(для img max-width:100%, размер дива определяет размер контента, в моем случае картинка. И если для h2 нужно больше места для контента, при уменьш экрана, картинка сжимается - отдаёт место для h2. Все работает без grow и shrink) Но, если img не обернуть в див( примере card-2, card-3) при сужении экрана изображение не сужается?
codepenh
<div class="cards">
      <div class="card card-1">
        <div>
          <img
            class="card-image"
            src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=320"
            width="1020"
            alt="A cat"
          />
        </div>
        <h2 class="card-heading">
          Card title 1 ffffffffffffffffffffffffffffff
        </h2>
      </div>
      <div class="card card-2">
        <img
          class="card-image"
          src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=320"
          width="1020"
          alt="A cat"
        />
        <h2 class="card-heading">
          Card title 2 ffffffffffffffffffffffffffffff
        </h2>
      </div>

      <div class="card card-3">
        <img
          class="card-image no-gap"
          src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=320"
          alt="A cat"
        />
        <h2 class="card-heading">Card title 3</h2>
      </div>
    </div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  line-height: 1.5;
  background-color: #f9f9fd;
}
.cards {
  max-width: 1220px;
  margin: 0 auto;
  background-color: #f44356;
}

.card {
  /*   max-width: 320px; */
  display: flex;
  justify-content: center;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f44336;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.card-image {
  max-width: 100%;
  height: auto;
}

.card-image.no-gap {
  display: block;
}

.card-heading {
  flex: 1;
  margin: 0;
  padding: 16px;
  font-weight: 500;
  background-color: #03a9f4;
}

.card + .card {
  margin-top: 20px;
}
  • Вопрос задан
  • 214 просмотров
Решения вопроса 1
divside
@divside
Chupapi Munyanyo
Тоже страдал от такой штуки. И даже спрашивал как-то на хабре и мы анализировали с топом.
Короче если у картинки есть родитель с каким-то фиксированным рамером - она заполнит его.
Если нет (независимо от того, есть ли выше у предков какой-то фикс размер) - она будет считать эти проценты от самой себя. Т.е если оригинал картинки допустим 2000х1000пх и мы поставим ей width:100% или max-width:100%в стилях - она не будет заполнять 100% доступного места от родителя, а будет показывать 100% от своего оригинального размера. Т.е 2000х1000пх

И даже если у картинки будет обёртка, размер обёртки будет зависеть от размера картинки, а не от того, что ты зада в стилях этой обертке. Поэтому лично я использую обертку как relative, а картинку как absoluteсо значениями WH:100%



Такая вот шляпа.

Поэтому я в любом своём проекте никогда не вставляю картинки без обёртки. Только если у них фикс.размер по макету.

Ещё в качестве примера могу показать своё:


На первый взгляд, тут у родителя нет фикс. размера, однако все картинки адекватно вебя ведут... Но не тут то было. CSS правило aspect-ratio: 1/1; у обертки, делает этой обёртке фикс размер, т.к по итогу браузер пересчитывает это в пиксели)) Стоит его убрать - картинки пойдут по п. Я искал инфу по этому поводу в спецификации и тд., но чет не нашел. Методом тыка напоролся, поборолся, понял что нифига не выйдет с этим сделать и принял так, как оно есть.

Так что как итог и ответ: Она и не должна сжиматься без родителя с фикс размером, т.к ориентируется на свой собственный размер.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы