13 Replies
Was doing this challenge there ^
I was initially using the img tag method and this is what I got: https://jsfiddle.net/wzydrmLx/8/
---
I fixed the issue which was using the method with
background-image: https://jsfiddle.net/tqjy1avf/5/
---
My questions are:
1- What's the difference between putting an img tag inside a div in the HTML vs having a div and setting a background-image property in the CSS?
2- Why did the background-image method word instead of the img tag method? (Maybe I probably coded it wrong)
3- Difference between background-size: cover and object-fit: cover? Also, I think the former is placed in the container and the latter on the img tag itself, right?
Thanks for reading; sorry for it being long 😅there is no real visual difference between background/object cover.
But the real difference is context. If the image is part of your content, then it should be in an img tag
(easy way to test for yourself, is by asking the question. "Should this image be visible when the user prints the page")
In this case I believe the image is part of your content because it shows the product.
why "it" didnt work for you is hard to say without seeing an example.
if you want to use object-fit: cover, the image should have a width and a height. (in most cases both width and height 100% of the parent)
Here a really quick example
(don't click if you want to try it yourself first)
https://codepen.io/MarkBoots/pen/bGMJRBL
Thanks a lot!
Also, not 100% sure, but I hear using height is not the best but I assume that is it fine for this case right?
Sometimes, I think it's tricky to know when to and when not to set height, is there a general rule of thumb?
no problem in this case. the 100% is relative to its parent
Quick question, what's the best way to set a height without actually setting a "height"? Is it using
aspect-ratio?
Here, only the width is set and height is generated using
aspect-ratioyea, that is an option.
btw, your value can be simplified to
should be the same
Oh yeah, it's the same 😅
This is super late, but I noticed, using these 2 properties here creates something kinda like a "media query"
Am I right? If yeah, can you explain it more, please? (How it works)
The reason why I said kinda like a "media query" is because it's responsive on both mobile and desktop