-2

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

Richardson
  • 1,804
  • 10
  • 38
  • Please visit the [help], take the [tour] to see what and [ask]. If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. – mplungjan Sep 12 '22 at 08:16
  • Does this answer your question? [How to "crop" a rectangular image into a square with CSS?](https://stackoverflow.com/questions/15167545/how-to-crop-a-rectangular-image-into-a-square-with-css) – Jeanot Zubler Sep 12 '22 at 08:18
  • Background property only works if the image is in the background. If you use an image tag then the image is in the foreground not in the background so behaviour of both is different – Nisarg Thakkar Sep 12 '22 at 08:19

2 Answers2

1

We see that the image is being squished to fit the container. For fix this you must set property "object-fit: cover;".

RomaZakharov
  • 34
  • 4
  • and what about backgroundPosition: "center top", ? what is the alternative ? – Richardson Sep 12 '22 at 08:30
  • 1
    your image 1300 × 866px, container `
    ` have max-height and max-width 150px, `background-position` can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be center.
     – RomaZakharov Sep 12 '22 at 08:43
  • I have updated the sandbox now you can see my point, there is a small difference in position of the picture.. why is it happening – Richardson Sep 12 '22 at 09:04
  • 1
    In the `div` you set `background-position: center top;`, and your background image shift to top, change simple to `background-position: center;` – RomaZakharov Sep 12 '22 at 10:35
  • actually background-position: center top is not working at all, that's the problem I want to shift the image down, did it work for you ? I want both version identical div and image that is my whole problem :( – Richardson Sep 12 '22 at 10:41
  • 1
    Try this [sandbox example](https://codesandbox.io/s/react-mui-forked-xx50sf?file=/index.js) – RomaZakharov Sep 12 '22 at 11:02
  • Working 100% thanks. – Richardson Sep 12 '22 at 13:34
1

When style is set directly on <img>:

  1. You set fixed dimensions that does not match with actual image and it disproportion your image
  2. Any background* property does not work, as image is not as background

When style is set directly on <div>:

  1. You set fixed dimensions for container, not image.
  2. Background image then can extend beyond container and is not in dispropotion
Justinas
  • 41,402
  • 5
  • 66
  • 96
  • sure but what is the proper solution to achieve same results regarding this ? – Richardson Sep 12 '22 at 08:29
  • @stop-error There is no alternative `background-position: center top` for ``, as it's different approach to how elements are rendered. For image to keep proportions, you should only define width/maxWidth and ensure height is not restricted. To have it rounded - `border-radius: 50%; overflow: hidden;` – Justinas Sep 12 '22 at 08:33
  • the other dude suggested object-fit: cover;". and it worked to some degree. – Richardson Sep 12 '22 at 08:38