CODEWITHSUNDEEP
htmlcssflexbox
Kirk
Kirk

Reputation: 479

CSS: flexbox image: limit height, not overflow other contents, but maximize size, and preserve aspect ratio

Flexbox is good. But one problem bothers me.
Can flexbox deal with images of arbitrary aspect ratio?

I want to limit the height of a flexbox, don't make contents overflow because of image being too big, but still, try to maximize the image, and preserve aspect ratio at the same time.
Is this possible? Or there's a better way to do it?

Correct me if I'm just too picky. Maybe we just don't have to consider arbitrary aspect ratio when designing web pages? Taking care of wide images & long images at the same time?

Here's an example:

html, body {
    height: 100%;
}
body, p {
    margin: 0;
}
main {
    display: flex;
    flex-direction: column;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.row {
    display: flex;
    max-height: 25%;
    border: 1px solid red;
}
.img_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;    
}
.img_wrapper > img {
    max-height: 100%;
    max-width: 100%;
}
.info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
}
<main>
    <div class="row">
        <div class="img_wrapper">
            <img src="https://via.placeholder.com/50x50.png">
        </div>
        <div class="info">
            <b>Title</b>
            <p>More info</p>
        </div>
    </div>
    <div class="row">
        <div class="img_wrapper">
            <img src="https://via.placeholder.com/3000x600.png">
        </div>
        <div class="info">
            <b>Title</b>
            <p>More info</p>
        </div>
    </div>
    <div class="row">
        <div class="img_wrapper">
            <img src="https://via.placeholder.com/600x1800.png">
        </div>
        <div class="info">
            <b>Title</b>
            <p>More info</p>
        </div>
    </div>
</main>

This is the result of the above html+css:

result

I'm trying to eliminate those white gaps between words & images, that is, "push" image and those words to the leftmost side.

What I want

This is what I want:

  1. Shrink due to height limitation: All three rows are limited to a certain height.
  2. Shrink due to width limitation: When the image is very "wide", as is the 2nd one, the content isn't overflowed. When image's width is too big, it should shrink and make the height smaller then the limit.
  3. But, still, I want the image to be as big as possible.
  4. Preserve aspect ratio.

This already works pretty fine when the image is square or not very extreme. Any idea?
Sorry, I didn't describe the question clearly.

This is answer by @ates_irem:

answer by ates_irem

Upvotes: 0

Views: 1278

Answers (2)

ates_irem
ates_irem

Reputation: 286

I think I did this time :) I arrange the height of the row in the .row class. Then for making justify-content:flex-start I handle the problem that automatically center the images and the texts. I think this will help you :)

html, body {
    height: 100%;
}
body, p {
    margin: 0;
}
main {
    display: flex;
    flex-direction: column;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.row {
    display: flex;
    width:100%;
    border: 1px solid red;
    flex:0 0 100%;
    max-height:100px;
    
}
.img_wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    
    height:100px;
}
.img_wrapper > img {
    max-width: 100%;
    height:100%;
    object-fit:cover;
}
.info {
    display: flex;
    flex-direction: column;
    align-self:center;
    justify-content: flex-start; 
    width:100%;
    margin-left:20px;
}

Upvotes: 1

ates_irem
ates_irem

Reputation: 286

I might not understand your question clearly because I am new in this business. But I write this lines of code and it saves the images aspect ratio.

html, body {
    height: 100%;
}
body, p {
    margin: 0;
}
main {
    display: flex;
    flex-direction: column;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.row {
    display: flex;
    width:100%;
    border: 1px solid red;
    
}
.img_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;    
    width:40%;
    height:auto;
}
.img_wrapper > img {
    max-width: 100%;
    height:auto;
    object-fit:cover;
}
.info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
}

Upvotes: 0

Related Questions