Home>

There is a picture that when inserting to the site, loses quality when adaptive. Below is an example as I insert it to the site (inserted through CSS and also does not help anything). I also tried through the Object-fit: none, it helps, but for some reason when I go through the laptop, the quality is bad, but through the PC is good. It is necessary to maintain the maximum quality. The picture itself is excellent quality 1-picture: with Object-Fit: none 2-picture: without Object-Fit: none 3-picture: source

div {
  Max-width: 500px
  Max-Height: 300px
  width: 100%;
  Height: 100%;
}
img {
  width: 100%;
  Height: 100%;
} 
<
Div >
  ≪
img >
 ≪
/div >

Can not understand anything. What picture? What is "good" and "bad" quality? Are you sure you have no scale on a laptop for example?

andreymal2021-09-09 12:20:12

The original picture is good quality. When loading it on the site, the quality deteriorates. No, not screwed

Павел2021-09-09 12:31:58

Still nothing is clear. Attach a picture, make a minimum reproducible example, show the screenshots of "good" and "bad" quality with the current Object-Fit: None

andreymal2021-09-09 12:33:40

Everything added. 1-picture: with Object-Fit: None 2-picture: without Object-Fit: None 3-picture: Source

Павел2021-09-09 12:40:58

And in general I would like to learn what ways there are ways to keep the most good quality picture when downloading to the site

Павел2021-09-09 12:42:02