Изображение растягивается с помощью Flexbox

Question

Я получил div, содержащий одно изображение и 5 текстовых элементов подряд, которые я равномерно распределил, используя Flexbox. Все абзацы выглядят как и ожидалось, но изображение растягивается, как только я изменяю ширину или высоту на что-либо, кроме 100%. Я использовал align-items: center и align-self: center.

section {
  display: block;
  width: 960px;
  margin: 0 auto;
  padding-top: 20px;
}

.result {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 70px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.result img {
  width: auto;
  align-self: center;
  height: 30px;
}

<section>
  <div class="result">
    <img src="transavia.png" alt="Transavia">
    <p><b>19:45 - 21:05</b><br>April 1st</p>
    <p><b>AMS-ORY</b><br>Transavia</p>
    <p><b>Direct</b><br>1 h 20 min</p>
    <p><b>SEK 611</b><br>Economy class</p>
    <h3 class="sixseven">7/10</h3>
  </div>
</section>

Answer 1

изображение растягивается, как только я изменяю ширину или высоту на значения, отличные от 100%. Это потому, что вы задали фиксированную высоту, поэтому высота должна быть 30 пикселей ... теперь, если вы назначьте ширину 100%, изображение будет растянуто, потому что я использую очень большое изображение ...

У вас есть следующие варианты:

• в синем разделе ... У меня есть огромное изображение (через URL-адрес c), чтобы показать поведение с шириной точки в процентах (в то время как высота остается автоматической) - это потребует медиазапросов, чтобы получить лучший результат на мобильном устройстве
• в зеленой части ... у меня есть огромное изображение (через URL-адрес c), чтобы показать поведение с размером в пикселях - это приведет к согласованному результату на мобильном устройстве
• в розовом разделе ... я использовал вашу фиксированную высоту и любую ширину, которую я использую, я получу растянутое изображение, потому что изображение большое, а высота фиксирована !!!
• в серой секции ... я использовал минимальную высоту, и поскольку изображение большое, оно возвращается к своему стандартному размеру (потому что оно соблюдает условие минимальной высоты)

section {
  display: block;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 20px;
}

section:nth-child(1) {
  background-color: lightblue;
}

section:nth-child(2) {
  background-color: lightgreen;
}

section:nth-child(3) {
  background-color: lightpink;
}

section:nth-child(4) {
  background-color: lightgray;
}

.result {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  min-height: 70px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  flex-wrap: wrap;
}

section:nth-child(1) .result img {
  width: 4%;
  align-self: center;
}

section:nth-child(2) .result img {
  width: 38px;
  align-self: center;
}

section:nth-child(3) .result img {
  height: 30px;
  width: 10%;
  align-self: center;
}

section:nth-child(4) .result img {
  min-height: 30px;
  align-self: center;
}

.result>* {
  border: 1px dotted yellow;
}

<section>
  <div class="result">
    <img src="https://www.akberiqbal.com/JumboMob.jpg" alt="Transavia">
    <p><b>19:45 - 21:05</b><br>April 1st</p>
    <p><b>AMS-ORY</b><br>Transavia</p>
    <p><b>Direct</b><br>1 h 20 min</p>
    <p><b>SEK 611</b><br>Economy class</p>
    <h3 class="sixseven">7/10</h3>
  </div>
</section>
<section>
  <div class="result">
    <img src="https://www.akberiqbal.com/JumboMob.jpg" alt="Transavia">
    <p><b>19:45 - 21:05</b><br>April 1st</p>
    <p><b>AMS-ORY</b><br>Transavia</p>
    <p><b>Direct</b><br>1 h 20 min</p>
    <p><b>SEK 611</b><br>Economy class</p>
    <h3 class="sixseven">7/10</h3>
  </div>
</section>
<section>
  <div class="result">
    <img src="https://www.akberiqbal.com/JumboMob.jpg" alt="Transavia">
    <p><b>19:45 - 21:05</b><br>April 1st</p>
    <p><b>AMS-ORY</b><br>Transavia</p>
    <p><b>Direct</b><br>1 h 20 min</p>
    <p><b>SEK 611</b><br>Economy class</p>
    <h3 class="sixseven">7/10</h3>
  </div>
</section>
<section>
  <div class="result">
    <img src="https://www.akberiqbal.com/JumboMob.jpg" alt="Transavia">
    <p><b>19:45 - 21:05</b><br>April 1st</p>
    <p><b>AMS-ORY</b><br>Transavia</p>
    <p><b>Direct</b><br>1 h 20 min</p>
    <p><b>SEK 611</b><br>Economy class</p>
    <h3 class="sixseven">7/10</h3>
  </div>
</section>