如何在桌子/ flex内以100％的高度放置图像？

Question

I'm struggling with getting my header area to behave the way I want when shrinking and enlarging the website. The header should be fully responsive.

What I want

The header consists of three parts:

|-------------------|----------------------------------------------|--------------|
||-----------------||                                              ||------------||
||  The site logo  ||    A text message                            ||Another logo||
||-----------------||                                              ||------------||
|-------------------|----------------------------------------------|--------------|

I want the rules to be like this:

• The logo is 40% of the document width but can't be wider than 400 px. This is done with width and max-width . Height is dynamic/auto.
• The text message column is gonna be as wide as it can be, but don't have any fixed width.
• The other logo to the right is gonna be 100% height of the column, which is based of the height of the site logo to the left.

The problem

The problem is that it seems impossible to get that logo to the right to be 100% in height without being as big as the entire document. I want it to have the height of the column as if the logo wasn't in there.

What I've tried

I've tried both the table solution (" div with display:table ") and the flex grid solution ( div with display:flex ). The latest mentioned is the one I'm currently struggling with.

 body { font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 14px; color: #fff; background: #20262e; } .container { display: flex; flex-direction: row; } .col { vertical-align: middle; background: hsla(0,0%,100%,.1); margin:2px; padding:10px; } .col.logo { width: 40%; max-width: 400px; } .col.logo img { width: 100%; height: auto; } .col.game-host-logo img { width:auto; max-width: 100%; height: 100%; } 

 <div class="container"> <div class="col logo"> <img src="https://dromfemman.se/assets/img/dromfemman_logo.png" /> </div> <div class="col live-msg"> Text Message </div> <div class="col game-host-logo"> <img src="https://dromfemman.se/assets/img/ssl_logo.svg" /> </div> </div> 

Answer 1

There are two main problems here:

1. There is no fixed height on the flex container or image item.
2. There is no fixed width on the flex item containing the image.

---

Problem #1: There is no fixed height on the flex container or image item.

Because there is no fixed height on the flex container, or the item containing the image ( .col.game-host-logo ), both are sized based on the size of the content ( height: auto default, per the spec ).

In this case, the content is an image with natural dimensions of 482 x 565 px.

---

Problem #2: There is no fixed width on the flex item containing the image.

Because there is no fixed width on the item containing the image, the image is again free to expand to its natural dimensions.

By setting a width to the item, your problem appears to be resolved without violating any of your requirements.

jsFiddle demo

 .container { display: flex; } .col.logo { width: 40%; max-width: 400px; } .col.logo img { max-width: 100%; height: auto; } .col.live-msg { flex: 1; /* consumes all free space */ } .col.game-host-logo { width: 20%; /* new */ } .col.game-host-logo img { max-width: 100%; } .col { background: hsla(0, 0%, 100%, .1); margin: 2px; padding: 10px; } body { font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 14px; color: #fff; background: #20262e; } 

 <div class="container"> <div class="col logo"> <img src="https://dromfemman.se/assets/img/dromfemman_logo.png" /> </div> <div class="col live-msg"> Text Message </div> <div class="col game-host-logo"> <img src="https://dromfemman.se/assets/img/ssl_logo.svg" /> </div> </div>