How to make an image proportionally in flexbox item or in sections – HTML & CSS – SitePoint Forums

I watched a couple of image code tutorials and still can’t figure it out! yay.


I’m not entirely clear on what you are asking, but my best guess is that object-fit is the property you are looking for.
Or in this case where they are background images background-size.

Also note that we can’t see the images in your pen, you will need a full absolute url.



1 Like

The browser will take an image and display it at full size unless you give it instructions not to, which you didn’t with the exception of the first box.

If you add the background-size to the .Controlled class (since you’re using it in all four boxes), then the images will fill the boxes. Is that the basic look you’re going for (substituted random pics in the code pen)?



1 Like

Doesn’t work for me.

Whole pic doesn’t fit in box.

Then you would use contain instead of cover for the size.



1 Like

Please define “doesn’t work for me”

contain and cover will resize the image the best way possible to fit within the confines of the space available. Difference is contain will resize it to the LARGEST side of the image to fit within the space, and keeps the aspect ration of the image. cover will do the same but will resize by the SMALLEST side of the image, and will crop the rest.

What that means is with contain, if the largest size is the smaller size of the container, there will be bleed through and the background-color will bleed through. With cover with the same situation, the image will be cropped where appropriate.

In other words, if you put a portrait image inside a landscape space, cropping or bleed through is going to occur.

Demo
Contain

Cover



4 Likes

I understand the concept kinda.

I want the cards to take up all the space in the container, methods I used and you used didn’t help. is it not possible?

It seems you don’t :slight_smile:

What you are asking for is to stretch the images to fill the space and although that is very easy to do it means that you break the aspect ratio of the image. You can’t make an image fit any space unless you oversize it or crop it in some way or you stretch it so it no longer looks like the image you started with.

If you have an image of a tall thin person and you stretch that into your card you will have an image of a short fat person :slight_smile: This has nothing to do with CSS but just the laws of the universe.:slight_smile:

Maybe we have misunderstood what you want so how would you have expected them to fit? Can you draw it? How would you like it to look?



1 Like

The only way to make this happen without distorting the image is for the container to have the exact same aspect ratio as the image.

But what you have are images in portrait orientation and containers in landscape. That’s never going to work.
Square pegs, round holes…



2 Likes

I do understand it actually, but I thought there would be some other code that will do it for me like fit the whole image in the container taking out the black bg.

What you are asking isn’t physically possible in any dimension of time or space :slight_smile:

I don’t mean to make light of the issue but how can an image fit the black space unless you distort it? Or you use cover and cover it which is what has already been offered to you but of course the image must be cropped for this to happen.

I don’t believe you have grasped the concept.

As I said above can you draw it?

What you are asking is akin to trying to make a perfect circle fit an oblong shape. It’s not possible unless you turn it into an ellipse or oversize it so you no longer see the whole circle.

Don’t worry you’re not the first to ask this question :slight_smile:



1 Like

I see, I’ll modify the image to make it fit like what sam said.
And it’ll look ugly

That will be the fault of your design and not the fault of css.:slight_smile:

I don’t want to labor the point but I still don’t think you have fully grasped the concept. How can you modify an existing image to fit a space it wasn’t designed for? Even in your paint package you will end up changing a circle to an ellipse to make it fit but that can be done in css anyway. Or you will crop the width and height to make it fit which can be done in css also.

What you really need is to choose images that match the aspect ratio of the space that you want them to fit.

In your first example you are placing a background image into a space that is 200px x 120px. Yet your images look to be taller than they are wider so will never fit into that space. If you made the box taller or indeed used images in the html then at least the box would expand to hold its contents although the issue of filling the width and height with the image still remains.

As I have said three times now can you actually draw what you want? Draw a box on a piece of paper that matches the 220px x 120px size of your box and then roughly draw one of your images sitting in that box. You won’t be able to do it because they don’t fit. If they don’t fit in the real world then they won’t fit in the online world either.

It sounds like I’m being awkward but unless I’ve misunderstood what you want then only possible things are possible 🙂



2 Likes

I understand what you mean, seriously, ty for your time.

These are your options, with a substitute dog image, but importantly with the same aspect ratio as your image.



2 Likes

I struggled with displaying thumbnails a long time ago and eventually decided the best way was to show the scaled image on a transparent background.

First there is a certain “physics” that will invariably be followed.

Whenever dealing with images of different proportions (regardless of size) that are beign constrained to a singular set of dimensions. you have only 3 choices.

  1. What you may know as “letterboxing”. You may be familiar with this effect, when you watch old movies in modern TVs. One (1) axis, usually horizontal, is shrunk to fit, causing the other axis to not cover its dimension completely…leaving a black area or “letterbox”… To letterbox: image:display:block; pick ONE axis property (height/width) and set it to :100% and the other to auto.

  2. Cropping is overflowing parts of the image get cut off. There is an additional aesthetic consideration when using this technique in automation. For example cropping the edges of a landscape is effective, cropping the edges equally off a portrait ( chin , forehead and both ears) will seem akward [oh… and your image itself may have been precropped in its art direction, which presents additional challenges]. A simple crop technique set the container to overflow:hidden; set the smaller axis of the image to 100%; Use alignment or margin accordingly to determine the crop position.

  3. Distortion. sometimes you can get away with this; stretching the image to fit by different about on each axis. To Distort simply set both width and height to 100%;

You can set proportions of an element with: aspect-ratio; this works with images AND/OR container elements; so in my example above you set the proportions on the image parent element.

hope that helps.

Leave a Comment