Image issues

`<div><img src="./cake.png" alt=""></div>
`<div><img src="./cake.png" alt=""></div>
VS
`<div class="cake"></div>`
`<div class="cake"></div>`
then in the CSS:
.cake {
background-image: url(./cake.png)
}
.cake {
background-image: url(./cake.png)
}
?
13 Replies
argbet
argbet•3y ago
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 😅
MarkBoots
MarkBoots•3y ago
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
argbet
argbet•3y ago
Thanks a lot!
argbet
argbet•3y ago
Also, not 100% sure, but I hear using height is not the best but I assume that is it fine for this case right?
argbet
argbet•3y ago
Sometimes, I think it's tricky to know when to and when not to set height, is there a general rule of thumb?
MarkBoots
MarkBoots•3y ago
no problem in this case. the 100% is relative to its parent
argbet
argbet•3y ago
Quick question, what's the best way to set a height without actually setting a "height"? Is it using aspect-ratio?
argbet
argbet•3y ago
Here, only the width is set and height is generated using aspect-ratio
MarkBoots
MarkBoots•3y ago
yea, that is an option. btw, your value can be simplified to
aspect-ratio: 4 / 3
aspect-ratio: 4 / 3
should be the same
argbet
argbet•3y ago
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"
argbet
argbet•3y ago
argbet
argbet•3y ago
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
argbet
argbet•3y ago
Want results from more Discord servers?
Add your server