CODEWITHSUNDEEP
htmlimageflexboxfillaspect-ratio
franz
franz

Reputation: 41

Force image inside flexbox container to fill/cover 100%

I'm relatively new to coding and need your help.

Here's the codepen: http://codepen.io/anon/pen/NdMjZy

 <div class="flex-item w50 fill">
    <div class="flex-inner portfolio">
       <a href="">
          <img src="" alt="">
       </a>
    </div>
 </div>

What I need: Images should fill/cover the flex-item container. They should be centered and stay in aspect-ratio.

You can see that the images with the chairs are not 100% height.

I tried to use imagefill.js but that resulted in 0px height flex-items.

Thank you in advance!

Upvotes: 4

Views: 15394

Answers (2)

Joe Hajj
Joe Hajj

Reputation: 1

All the methods mentioned here and everywhere else didn't work efficiently . I have 52 Flex boxes , aligned 13 x 4 , and inside each box , there is an image with 6 x 6 cm dimensions . What worked for me is targeting the <a> element :

.container nav ul li a {

    display: block;
    border: 10px solid yellow;
    border-radius: .5em;
    padding: 0 0;
    margin: .2em;
}

Upvotes: -1

Duannx
Duannx

Reputation: 8726

You can set object-fit: cover for your img. Your a element must be a flexbox to make object-fit work.

Note that: I just add resize: both; to .flex-inner for demo only. You can resize the .flex-inner to see effect

.flex-inner {
  width: 200px;
  height: 200px;
  resize: both;
  overflow: auto;
}

.flex-inner a {
  display: flex;
  width: 100%;
  height: 100%;
  border: solid 1px #123;
}

img {
  object-fit: cover;
  width: 100%;
}
<div class="flex-inner">
  <a href="">
    <img src="http://via.placeholder.com/500x200" alt="">
  </a>
</div>

Upvotes: 6

Related Questions