Hello!

There is a block 700x700 and there is a picture 500x500, which is in the block. How to automatically zoom the image to the block size? Those. it will increase, but fit in the block.

I tried through bg-size: cover, but the picture quality is lost there. There are options?

Closed due to the fact that it is necessary to reformulate the question so that you can give an objectively correct answer to the participants ikerya , aleksandr barakin , user194374, Alex , Bald December 20, '16 at 3:57 .

The question gives rise to endless debates and discussions based not on knowledge, but on opinions. To get an answer, rephrase your question so that it can be given an unambiguously correct answer, or delete the question altogether. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 2
    This is natural, when you increase the picture more than 100% you get soap. - Crantisz
  • @Crantisz somewhere I already heard it) - ikerya
  • it spoke inside Common Sense - Crantisz

2 answers 2

Without loss of quality, it is still necessary, it is logical. You can soften the image a bit with

background-size: cover; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; 
     img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ }
    • still losing quality - ikerya
    • on the example of jsfiddle possible? - ikerya
    • A picture that with 500x was not stretched to 700x could not be lost in quality, it is not its size, it would be strange if any small picture was stretched to any size and would not lose in quality as well) - junior-web-dev
    • one
      exception vector image =) - junior-web-dev