CODEWITHSUNDEEP
htmlcssflexbox
SauceTV
SauceTV

Reputation: 25

Image Not being Contained In Flex Row

Update: 'try min-height:0 on .image-parent and then height:100% on the images' works Credit: Temani Afif

I have a card that is 250x420 pixels I need the information to take up all of the space it needs and have the image take up the rest. The image needs to be vertically and horizontally aligned. The image also has to shrink or grow keeping the aspect ratio. When the text wraps to the next line it seems to move the picture down. Here is the jsfiddle

.card-grid {
  display: flex;
  background: black;
}

.profile-card {
  background: #7c7d7c;
  height: 420px;
  width: 250px;
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.text-content {
  text-align: center;
  font-weight: bold;
  width: 100%;
}

.image-parent {
  flex-grow: 1;
  background: black;
  display: flex;
  align-Items: center;
  justify-content: center;
}

.image-resize {
  width: 100%;
  height: auto;
  object-fit: contain;
}
<div class="card-grid">

  <div class="profile-card">
    <div class="text-content">
      XXXX,XXXX X
    </div>
    <div class="image-parent">
      <img class="image-resize" src="https://media.macphun.com/img/uploads/customer/how-to/579/15531840725c93b5489d84e9.43781620.jpg?q=85&w=1340">
    </div>
    <div class="text-content">
      XX/XX/XXXX
    </div>
    <div class="text-content">
      XXXX Hello World Ave.
    </div>
  </div>


  <div class="profile-card">
    <div class="text-content">
      XXXXXXXXXXXXXX, XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX
    </div>
    <div class="image-parent">
      <img class="image-resize" src="https://media.macphun.com/img/uploads/customer/how-to/579/15531840725c93b5489d84e9.43781620.jpg?q=85&w=1340">
    </div>
    <div class="text-content">
      XX/XX/XXXX
    </div>
    <div class="text-content">
      XXXX Hello World Ave.
    </div>
  </div>

  <div class="profile-card">
    <div class="text-content">
      XXXX,XXXX X
    </div>
    <div class="image-parent">
      <img class="image-resize" src="https://upload.wikimedia.org/wikipedia/commons/3/38/Tampa_FL_Sulphur_Springs_Tower_tall_pano01.jpg">
    </div>
    <div class="text-content">
      XX/XX/XXXX
    </div>
    <div class="text-content">
      XXXX Hello World Ave.
    </div>
  </div>


  <div class="profile-card">
    <div class="text-content">
      XXXXXXXXXXXXXX, XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX
    </div>
    <div class="image-parent">
      <img class="image-resize" src="https://upload.wikimedia.org/wikipedia/commons/3/38/Tampa_FL_Sulphur_Springs_Tower_tall_pano01.jpg">
    </div>
    <div class="text-content">
      XX/XX/XXXX
    </div>
    <div class="text-content">
      XXXX Hello World Ave.
    </div>
  </div>

</div>

Upvotes: 0

Views: 92

Answers (1)

Nazarii Oliinyk
Nazarii Oliinyk

Reputation: 36

If I understood right these must help you:

.card-grid{
  display: flex;
  background: black;
  
}
.profile-card{
  background: #7c7d7c;
  height: 420px;
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 5px;
}
.text-content{
  text-align: center;
  font-weight: bold;
  width: 100%;
}
.image-parent{
  flex-grow: 1;
  background: black;
  display: flex;
  align-Items: center;
  justify-content: center;
}
.image-resize{
  height: 100px;
}

Upvotes: 1

Related Questions