css Question posted in
Some basic documentation can be found here.

Css – flexbox column Resize image according to text length

Given a flexible box column, how can I resize image as text length increases to fit.

.container {
  width: 400px;
  height: 300px;
  border: 3px solid green;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.img-wrapper {
  /* display: flex; */
}

.img-wrapper img {
  max-width: 100%;
  /* min-height: 0px; */
  object-fit: cover;
}
<div class="container">
  <div class="img-wrapper">
    <img src="https://static.billboard.com/files/media/talib-kweli-2018-cr-Dorothy-Hong-billboard-1548-compressed.jpg" />
  </div>
  <div class='text'>
    this is a cool paragraph about the angry theicn shfieh that eats and is not pfeifol about the nutehc chartogret including but not adfentily of the crooked and devque thandilbot. Piej kargrid angy that iejf othersome to the compact shiferboth
  </div>
</div>

If the image is top-level, this simple CSS solves:

img {
  min-height: 0px;
  object-fit: cover;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Looks like this does the job; could have sworn I had tried it already

      .img-wrapper {
    min-height: 0px;
  }

  .img-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  2. 0 
    .container {
    width: 400px;
    height: 300px;
    border: 3px solid green;
    padding: 4px;
    display: flex;
    flex-direction: column;
}

.img-wrapper {
    /* display: flex; */
    min-height: 0;  /* make it so it won't be stretch by children */
}

.img-wrapper img {
    max-width: 100%;
    max-height: 100%;  /* make the image auto scale to fit both width and height */
    object-fit: cover;
}
    <div class="container">
  <div class="img-wrapper">
<img src="https://static.billboard.com/files/media/talib-kweli-2018-cr-Dorothy-Hong-billboard-1548-compressed.jpg" />
  </div>
  <div class='text'>
this is a cool paragraph about the angry theicn shfieh that eats and is not pfeifol about the nutehc chartogret including but not adfentily of the crooked and devque thandilbot. Piej kargrid angy that iejf othersome to the compact shiferboth
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search