There is a photo. How to throw it on the background, so that it filled the whole space, but at the same time preserved the proportions?
Thank.

  • What are photo sizes? - Palmervan
  • no difference - Blogaster
  • bother you ... what's the difference what photo? Maybe I want to put 1256px at 2000px or 500 at 500. Yes, and I found the solution .. with the help of CSS3 - Blogaster
  • 2
    @Palmervan, keep it quiet is good advice. A bad mood is not a reason to turn a forum of programmers into a Butovo porch. Also, the size for the question really is not important. - Sh4dow
  • It was a similar task not so long ago, according to the statement of work, it was said that a large picture should be centered if the screen size is smaller than the size of the picture. - FreeMast

2 answers 2

When you increase the size of the image with a small resolution will lose quality. Everything depends only on its quality and size, to which you want to increase it. Because of this "not universality" of scaling, it is customary to make sites with static frames that would look equally well on widescreen screens

  • I solved this problem with CSS3 -moz-background-size:cover; -o-background-size:cover; -webkit-background-size:cover; -khtml-background-size:cover; background-size:cover; -moz-background-size:cover; -o-background-size:cover; -webkit-background-size:cover; -khtml-background-size:cover; background-size:cover; - Blogaster

I can advise you to make a set of images for popular permissions and insert the nearest javascript. In general, the very idea of ​​a little good, but if you need - you need to decide)

 <body id="body"> <script type="text/javascript"> var swidth = [ 1024, 1280, 1600, 1920 ]; var imgw = 2560; // по дефолту самое большое for (var sw in swidth) if (screen.width <= swidth[sw]) { // подбираем такое же или большее разрешение imgw = swidth[sw]; break; } document.getElementById('body').style.background = "#fff url('/images/"+imgw+".jpg') 50% 50% no-repeat"; // ставим фон </script>

Something like this ... Wrote here, check-edit on you)

  • Yes, it can also be solved through the same image upload, only so that it is resized on the server using, for example, php + gd and output to the browser, with caching and other optimizations, but this is an option with a very sad picture quality, and I'm not really up for such cases) - Sh4dow