CODEWITHSUNDEEP
htmlcssbackground-imagesprite
Frank
Frank

Reputation: 11

How to resize partial image to always fit screen by using background sprite

I have a large image file (3838x1049) generated from a dual screen screenshot and I need to create 2 HTML files with each file displaying one half of the image.

I was able to achieve that by using the background sprites and specifying the portion of the image I want to see.

The problem is that the image is displayed in its original size which is larger than a typical monitor resolution. I need it to resize automatically to fit the screen while preserving the aspect ratio.

Can anyone help ?

Here is my current code for displaying the right portion of the image:

<html>
<head>
<style>
img.home {
          width: 1899px;
          height: 1020px;
          background: url(dashboard.jpg) -1930px -1px;
         }
</style>
</head>
<body>

<img class="home" src="img_trans.gif"><br><br>

</body>
</html>

Upvotes: 1

Views: 499

Answers (2)

M.I.A
M.I.A

Reputation: 247

Dont have Enough reputation to comment thats why i am putting it in here. try adding the both styles in a main container then apply the approach of width percentage

<style>
imgMainContainer{width:100%;}
</style>

then put both the right and left images in the main container with widths 100% for each. following is the old answer so consider above only

Try using the percentage instead of pixels in background height and width.

   <html>
    <head>
    <style>
    img.home {
              width: 100%;
              height: 100%;
              background: url(dashboard.jpg) -1930px -1px;
             }
    </style>
    </head>
    <body>

    <img class="home" src="img_trans.gif"><br><br>

    </body>
    </html>

Upvotes: 1

Victor Sitnic
Victor Sitnic

Reputation: 380

CSS

.leftImg{
 background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-hoto-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%; 
width:50%;
height:100vh; 
}

.rightImg{
background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-photo-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%; 
width:50%;
height:100vh; 
background-position: right top
}

and HTML

<div class="leftImg"></div>
<div class="rightImg"></div>

Try this

Upvotes: 0

Related Questions