Currently working on integrating the front-end with a MERN stack application and facing challenges with Reactstrap Cards and CardImgs. I am specifically trying to ensure that the images do not exceed a certain max height, while also keeping all the content within the Card (this includes CardTitle, CardText, etc).
I have explored different suggestions on StackOverflow, such as setting max-height on the image and width:auto, but the image ends up being vertically squeezed - it follows the max-height but does not adjust the width leading to a distorted appearance. After spending an hour trying out various solutions, I haven't been successful. It seems like a simple issue, but I'm unable to find the right solution. Any assistance would be greatly appreciated!
Please refer to the attached image for a visual representation of the issue.
https://i.sstatic.net/lun3B.png
EDIT: As requested, here is the HTML and CSS. The following code works relatively well, but taller images get distorted when their height is limited. The HTML (from JSX) is as follows:
.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>