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

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

0 голосов
/ 20 сентября 2018

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

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

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

What I'm seeing: the distortion

РЕДАКТИРОВАТЬ: меня попросили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 Ответ

0 голосов
/ 20 сентября 2018

В настоящее время вы устанавливаете 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>
...