在伸缩列中将图像设置为始终为全高

Question

I have two columns set to 50%, left with text and right with image that should fill whole column vertically. The problem is that when text is a little bigger, there is a gap below the image. Is it possible to always have the image occupy the full height (but in same ratio)? For example, the image could get wider than its column, in that case I could just set overflow hidden.

 .flex { display: flex; border: 3px solid black; padding: 10px; } .col { border: 1px dashed #aaa; } .left { padding: 30px; } 

 <div class="flex"> <div class="col left"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo, quod reprehenderit omnis! Sequi nulla nemo a magni voluptates. </p> </div> <div class="col right"> <img src="http://placehold.it/550x250" alt=""> </div> </div> 

Answer 1

You have to set following CSS properties to image

height:100%; width:auto;

 .flex { display: flex; border: 3px solid black; padding: 10px; } .col { border: 1px dashed #aaa; overflow-x: hidden; } .left { padding: 30px; } .right img { height: 100%; width: auto; } 

 <div class="flex"> <div class="col left"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo, quod reprehenderit omnis! Sequi nulla nemo a magni voluptates. </p> </div> <div class="col right"> <img src="http://placehold.it/550x250" alt=""> </div> </div> 

Answer 2

The quickest way to get the image to fill the vertical height of the container would be to make the parent a flex container. This automatically applies align-items: stretch to the children (in this case, the image).

.right { display: flex; }

From that point, you could use various methods to set the correct aspect ratio to the image. You could use percentage height, if you have defined heights on the parent / ancestors.

Or you could use the object-fit property.

 .flex { display: flex; border: 3px solid black; padding: 10px; } .col { border: 1px dashed #aaa; } .left { padding: 30px; } .right { display: flex; } img { object-fit: cover; } 

 <div class="flex"> <div class="col left"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo, quod reprehenderit omnis! Sequi nulla nemo a magni voluptates. </p> </div> <div class="col right"> <img src="http://placehold.it/550x250" alt=""> </div> </div> 

Note that object-fit is not natively supported in Internet Explorer. For more details and a workaround see: Why isn't object-fit working in flexbox?