How to get the image a full size of the div.
Hello guys. How do i get the picture the full size of the 400*400. Its nor working out the way i want. Also when i give the parent element of the image wich is div class=img height: auto and width=100% its not working.
If i make the picture bigger my first div is the way i want it anymore as you can see in the second picture. So thats also not working. What should i do?
https://codepen.io/Boeroe/pen/PoVPPGX
8 Replies
I think the puzzle piece you are missing may be
object-fitIn the class= img I guess?
If i give the image a class of fill and give it object-fit: fill; its not working out
Your image has an intrinsic size, which is the resolution that would be reported if you were to open it in an image editor.
If you set the width and height of the image on the
img element like you're doing in the pen you shared, you're overriding the image's own intrinsic side. This is usually considered a bad idea. You should use CSS.
If you set just the width or just the height of the image, the browser will automatically adjust the other dimension so that it still has its original aspect ratio.
If you want an image to take up all the space in its container and you don't care about it maintaining its original aspect ratio, set both width and height to 100%.
Bear in mind that when you're using percentages for the dimensions of the image, you have to explicitly set the width and height of the container or else the browser doesn't know what it's a percentage of.
If you want the image to take up all the space in its container use object-fit property on the image itself as suggested by Wolle. You have a few options for this property. To understand them better, you should read about them at the MDN page. It has a "Try it" section that will help you to understand them and play around to get the effect you want.object-fit - CSS: Cascading Style Sheets | MDN
The object-fit CSS property sets how the content of a replaced element, such as an or , should be resized to fit its container.
If i try to do it with object-fit: fill; the whole image is getting bigger even i've i make the div a correct size. Do you have an example on my code how to fix it so i can learn form it
I think there's a ratio property if I'm not mistaking
Sure. I forked yours and changed some things so that it's more consistent with how CodePen is usually used. So, the HTML section only has what would normally be in the HTML body and the stuff that was in the
<head> (fonts and boxicons stylesheet) has been moved to the Stuff for <head> part of the pen settings.
I removed the width and height properties from the <img> in the HTML and changed .textani to a DIV instead of an H4. It's not valid to have H4 inside of DIV.
I replaced your "png.png" with one of the free images from CodePen's Assets so that we could see the result of my changes.
You'll want to focus on the CSS properties for .img and .img img. That's where you'll find what you're looking for.
https://codepen.io/VAggrippino/pen/bGzVVZd
There's aspect-ratio, but I don't think that would be useful here.I mean if he wants to keep the image as big as he wants
but I can't see the image in the codepen
Thank you Vince!