Flexbox：如何在Flex项目中使图像高度相等？

Question

Okay, so I'm trying to display images with equal width and height inside 6 flexbox items.

In screen size with min-width: 768px each flex-item grows to 1 when there is 30% space, ie flex: 1 30%; flex-direction: is changed to row;

The problem : The flex item divs themselves are equal in height and width but the image inside each flex item are various sizes.

Attempt : Tried align-items: stretch; and even giving min-height to each image doesn't work?

Also is flex-wrap even necessary when using flex: 1 30%?

I'm clearly doing something wrong, any ideas?

 /* ## Services */ .services-wrap { text-align: center; padding-top: 4rem; } .services-flex { display: flex; flex-direction: column; flex-wrap: wrap; } .service-img { min-height: 100% !important; /*width: 100%;*/ } @media screen and (min-width: 768px) { .services-flex { flex-direction: row; padding: 0 4rem; flex-wrap: wrap; align-items: stretch; max-width: 1500px; margin: auto; } .flex-box { flex: 1 30%; /*margin: 1rem;*/ } } 

 <section class="services-wrap"> <h3>OUR SERVICE</h3> <hr> <div class="services-flex"> <div id="service-box" class="flex-box"> <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/comercial.jpg"> </div> <div id="service-box" class="flex-box"> <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/residential.jpg"> </div> <div id="service-box" class="flex-box"> <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/rural.jpg"> </div> <div id="service-box" class="flex-box"> <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/industrial.jpg"> </div> <div id="service-box" class="flex-box"> <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/other.jpg"> </div> <div id="service-box" class="flex-box"> <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/other.jpg"> </div> </div> </section> 

UPDATE

Okay I think the issue was that 2 of the 6 image sizes were to small like 200 by 250 vs the rest which was 600-1200px. So I've fixed this by having larger image sizes initial so the image is not distorted and also grows in equal.

Notice the first and the last image heights are not equal, but why?

Please check the CSS again as I have updated it with the changes to match the image above!

Please help, thank you!

Answer 1

This is not a technical problem, this is conceptual problem. When you have images of varying aspect ratios and you want to display them in an orderly, even mannor, then first you have to think whether you want:

a) the images to be distorted or trunctated to leave no whitespace

or

b) the images to have whitespace between them or around them. In this case you can also make decisions on how you want to distribute the whitespaces.

Those are your basic choices.

For a) you can set the images width to 100% or the image wrapper to overflow-y: hidden

For b) you can set max-width and max-height and and center your images in the wrappers with centering method of your choice.

As a bonus possibility you can also set the flex-basis to auto and flex-grow to 0 and let the flex-box decide how many images are displayed before the row-wrap. On large 4k displays you might not want two rows of enlarged images anyways

Answer 2

Could you try setting the image as a background image inside the flex div? As then you can do: background-size:cover; This will ensure all the div is covered by the image, although some of it may be missing depending on its proportions in comparison to the div. If you still want the alt tag you could try adding a transparent png placeholder inside the div which can contain the alt text.

Answer 3

I've used this css min-height:100%; for smaller images to expand to parent flex-box items. I've also hardcoded min-height: 220px; to parent items just to have all equal height.. see the snippet in full screen to see how it works..

 /* ## Services */ .services-wrap { text-align: center; padding-top: 4rem; } .services-flex { display: flex; flex-direction: column; flex-wrap: wrap; } @media screen and (min-width: 768px) { .services-flex { flex-direction: row; padding: 0 4rem; flex-wrap: wrap; align-items: stretch; max-width: 1500px; margin: auto; } .flex-box { flex: 1 30%; margin: 1rem; min-height: 220px; } } img { min-height: 100%!important; } 

 <section class="services-wrap"> <h3>OUR SERVICE</h3> <hr> <div class="services-flex"> <div id="service-box" class="flex-box"> <img class="service-img" src="http://placehold.it/125"> </div> <div id="service-box" class="flex-box"> <img class="service-img" src="http://placehold.it/155"> </div> <div id="service-box" class="flex-box"> <img class="service-img" src="http://placehold.it/175"> </div> <div id="service-box" class="flex-box"> <img class="service-img" src="http://placehold.it/195"> </div> <div id="service-box" class="flex-box"> <img class="service-img" src="http://placehold.it/205"> </div> <div id="service-box" class="flex-box"> <img class="service-img" src="http://placehold.it/225"> </div> </div> </section> 

Answer 4

Here's a solution for your problem if you don't want the images to get distorted but rather if you would have them cropped in position just to fill the div containing it inside the flexbox.

.flex-box{
  height:200px;
  overflow-y: hidden;
}

img {
    width: 300px;
    border: 0;
}

This sets the height of the parent container as fixed and hides if the image overflows. And the image maintains a fixed width inside the parent div.

If not, your other alternative is as I mentioned in the comment is to set the width and height for the image to a fixed value.