CODEWITHSUNDEEP
htmlcssflexbox
cryptopi
cryptopi

Reputation: 313

CSS Flexbox Image Shrink

I am working on a website and have a CSS flexbox question. Basically, I have a div of a fixed height and width. Inside the div, I need to have a title area, content area, and footer area (in that order, top to bottom). The title and footer area must always be tall enough to render their contents (usually one line of text). The content area must shrink such that the three areas fit into their parent div, vertically (and horizontally).

The problem is that the content area consists of a picture that must maintain aspect ratio when the content area shrinks to fit vertically.

My basic methodology (that does not work): use CSS flex on the parent div. Make the title area and footer area have flex-shrink be 0 (thus they fit their contents). Then, make the flex-shrink of the content area and the image inside of it be 1 (to [theoretically] make all three areas fit, but this does not work, as evidenced by the JSFiddle).

HTML:

<div class="container">
    <div class="title-container"> <!-- should not shrink -->
         <h1>Title</h1>
    </div>
    <div class="picture-container"> <!--should shrink to fit vertically and horizontally -->
        <img src="http://i.imgur.com/D08iV30.jpg"> <!-- should fit inside picture-container and maintain aspect ratio -->
    </div>
    <div class="button-container"> <!-- should not shrink -->
        <span>button</span>
    </div>
</div>

CSS:

.container {
    border: 1px solid black;
    height: 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
}
.title-container {
    flex-shrink: 0;
}
.button-container {
    flex-shrink: 0;
}
.picture-container {
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
}
.picture-container img {
    flex-shrink: 1;
}

JSFiddle demonstrating problem:here

The solution does not have to use flexbox. The only requirements are that the title and button areas do not shrink, the content area shrinks such that all three areas fit both vertically and horizontally in the container, and the image in the content area fits in the content area preserves aspect ratio.

Thanks in advance for any assistance.

Upvotes: 2

Views: 2274

Answers (1)

Ori Drori
Ori Drori

Reputation: 191976

If instead of img you use background-image for div.picture-container, you can use cover or contain on the background to maintain aspect ratio (fiddle):

HTML:

<div class="container">
    <div class="title-container">
         <h1>Title</h1>
    </div>
    <div class="picture-container" style="background-image: url(http://i.imgur.com/D08iV30.jpg)">
    </div>
    <div class="button-container">
        <span>button</span>
    </div>
</div>

CSS

.container {
    border: 1px solid black;
    height: 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
}
.title-container {
    flex-shrink: 0;
}
.button-container {
    flex-shrink: 0;
}
.picture-container {
    flex: 1;
    background-size: cover; /** you can use contain if you want to prevent image cropping **/
    background-repeat: no-repeat;
}

Upvotes: 2

Related Questions