Design comparison
Solution retrospective
What changes should I make for the image not to look streched?
Community feedback
- @danielmrz-devPosted 11 months ago
Hello @Jump3rX!
Your solution looks great!
Other than the options that you were given in the previous comments, I have one more option:
- Use the image as the
.product-img-container
background. I admit it's not the best option, but it gives you a lot of flexibility to manipulate the image. Once you use it as a backgroung, you can set its size tocover
. The result is very good.
I hope it helps!
Other than that, great job!
Marked as helpful0 - Use the image as the
- @xaocccPosted 11 months ago
I used this approach: CSS :
img { display: table-row; float: left; width: 50%; height: 100%; }
HTML:
<div id="content-box" role="main"> <img id="main-img" src="./project1-data/images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum" /> <div id="item-description"> ... </div> </div>
You can try also using display: flex for the content-box and display: block for the image. The adjust the image size. Hint: use the inspect element option on the browser right click. You can adjust the CSS in real time and see what happens. Here is my code if you what to compare: https://github.com/xaoccc/xaoccc.github.io/tree/main/project1-data - CSS https://github.com/xaoccc/xaoccc.github.io/blob/main/project1.html - HTML
Marked as helpful0 - @BlackpachamamePosted 11 months ago
You can try using the
picture
tag together withsource
to correctly apply the image change according to the screen size: [Tag Picture](https://developer.mozilla.org/en-US/docs/Web /HTML/Element/picture)You also don't need to apply borders to the image, just apply an
overflow: hidden
to yourcard
classMarked as helpful0@Jump3rXPosted 11 months ago@Blackpachamame Thank you , this I have never thought of, I shall give it a try.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord