Установка максимальной высоты на Reactstrap/Bootstrap CardImg не сохраняет соотношение сторон - как решить?

Я помещаю интерфейс в приложение стека MERN и у меня проблемы с Reactstrap Card с и CardImg s. В частности, я бы хотел, чтобы изображения не превышали определенную максимальную высоту, а также для всего контента (который также включает CardTitle, CardText и т. д.) Card

Я прочитал различные рекомендации в Stackru, такие как настройка max-height на изображении и width:auto но изображение оказывается раздавленным вертикально - он уважает max-height но не регулирует ширину, поэтому она выглядит искаженной. Я провел час, играя с разными решениями, и ничего не работает - кажется, это должно быть просто, но я этого не вижу. Любая помощь высоко ценится!

Смотрите прикрепленное изображение, о чем я говорю

Что я вижу: искажение

РЕДАКТИРОВАТЬ: меня попросили HTML и CSS. Следующее работает довольно хорошо, но более высокие изображения искажаются, когда их высота ограничена - HTML (из JSX)

.project__card {
  border: solid 1px grey;
  max-width: 50vw;
  margin-bottom: 3em;
  padding: 3em;
}

.project__card .project__cardImage {
  width: auto;
  height: auto;
  display: block;
  max-height: 50vh;
}

.project__card .project__cardTitle {
  font-size: 1.2em;
}

.project__card .project__cardSubTitle a:active,
.project__card .project__cardSubTitle a:link {
  text-decoration: none;
  color: yellow;
}

.project__card .project__cardSubTitle a:hover,
.project__card .project__cardSubTitle a:active {
  text-decoration: underline;
  color: darkred;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="projectGroup__project col-12 col-md-8">
  <div class="project__card card">
    <img width="100%" src="https://via.placeholder.com/550x350" alt="" class="project__cardImage card-img-top">
    <div class="project__cardBody card-body">
      <h5 class="project__cardTitle card-title">A title</h5>
      <h6 class="project__cardSubTitle card-subtitle"></h6>
      <p class="card-text">Some text</p>
      <p class="project__cardTechnologies card-text"><span>Roles:  </span>Design, Client Contact
      </p>
    </div>
  </div>
</div>

Источник

1 ответ

В настоящее время вы устанавливаете оба height а также width в auto, Волшебная комбинация достигается путем установки одного из них 100% а другой к auto в зависимости от того, какое измерение вы хотите продиктовать шкалу.

.project__card {
  border: solid 1px grey;
  max-width: 50vw;
  margin-bottom: 3em;
  padding: 3em;
}

.project__card .project__cardImage {
  width: 100%;
  height: auto;
  display: block;
}

.project__card .project__cardTitle {
  font-size: 1.2em;
}

.project__card .project__cardSubTitle a:active,
.project__card .project__cardSubTitle a:link {
  text-decoration: none;
  color: yellow;
}

.project__card .project__cardSubTitle a:hover,
.project__card .project__cardSubTitle a:active {
  text-decoration: underline;
  color: darkred;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="projectGroup__project col-12 col-md-8">
  <div class="project__card card">
    <img width="100%" src="https://via.placeholder.com/550x350" alt="" class="project__cardImage card-img-top">
    <div class="project__cardBody card-body">
      <h5 class="project__cardTitle card-title">A title</h5>
      <h6 class="project__cardSubTitle card-subtitle"></h6>
      <p class="card-text">Some text</p>
      <p class="project__cardTechnologies card-text"><span>Roles:  </span>Design, Client Contact
      </p>
    </div>
  </div>
</div>

Источник
Другие вопросы по тегам