I have the following example where I use same styling of an image, and on a div.
The point is the property on a div makes the image looks way better, yet on the image makes the image distorted. what is the deal here? I am using the same styling for both yet somehow, it is not being applied as it should. Code sand box example
CodePudding user response：
We see that the image is being squished to fit the container. For fix this you must set property "object-fit: cover;".
CodePudding user response：
When style is set directly on <img>:
- You set fixed dimensions that does not match with actual image and it disproportion your image
- Any
background*property does not work, as image is not as background
When style is set directly on <div>:
- You set fixed dimensions for container, not image.
- Background image then can extend beyond container and is not in dispropotion