Почему высота: авто не работает для этого изображения?

Question

У меня есть контейнер flexbox с двумя элементами flex.Один - это изображение, а другой - абзац.Я пытался пропорционально изменить размер изображения, задав ширину: процент и высоту: авто, но это не работает.Пожалуйста, помогите мне решить эту проблему.

.item{
  display:flex;
}
img{
  width: 25%; /* not working */
  height: auto;
}

<div class="item">
  <img
  src=
  "https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg"/>
  <p>some paragraph</p>
</div>

JSFiddle link - https://jsfiddle.net/dizzyramen/xfot3Lwv/2/

Answer 1

Значение по умолчанию для гибкого контейнера: align-items: flex-start.

В контейнере в направлении строки это приводит к тому, что гибкие элементы, не имеющие определенной высоты (например, height: auto), увеличивают полную высоту контейнера ( полное объяснение ).

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

Решение состоит в том, чтобы установить ограничение высоты контейнера или переопределитьпо умолчанию с align-items: flex-start для контейнера или align-self: flex-start для элемента.

jsFiddle demo

.item {
  display: flex;
}

img {
  width: 25%;
  align-self: start; /* new */
}

<div class="item">
  <img src="https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg" />
  <p>some paragraph</p>
</div>

Answer 2

вот еще один вариант:

• оберните ваш img в div <div class="image-wrapper"> и установите управление шириной в этом узле.
• присвойте width: 100%; height: auto; значению img, чтобы оно корректировалось пропорционально его родителю.
• Вот оно у вас во фрагменте. Надеюсь, это поможет.

<div class="item">
    <div class="image-wrapper">
        <img
            src=
  "https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg"/>
    </div>
    <p>some paragraph</p>
</div>

<style>
.item{
  display:flex;
}
.image-wrapper {
  width: 25%; /* means 25% of .item */
}
img{
  width: 100%; /* means 100% of its parent .image-wrapper */
  height: auto;
}
</style>

Answer 3

Это происходит потому, что по умолчанию тег <img> является встроенным.Вы должны изменить это, чтобы заблокировать или согнуть