I just received help in another question I recently asked here in regards to sprites, but now that I have them working properly, I have run into another problem: How can I scale the image displayed?
My current code is as follows:
<div class="index1"></div>
And CSS:
img.index1 {
margin:auto;
width:258px;
height:300px;
background:url("../Images/index.png") 0px 0px;
}
This is the basic code that works as is, to display the appropriate image from the sprite at an absolute dimension of 258*300 pixels. Problem is, I also want to set the width to be 40%. Here is what I tried:
.index1 {
margin:auto;
width:40%;
max-width:258px;
height:300px;
background:url("../Images/index.png") 0px 0px;
}
If I were to use normal images (ie, not sprites), I'd simply set the width to 40%, and the image scales nicely to the containing div. This would be in a ratio, so the height decreases as well, without any distortion or image cutoff. Using the CSS above, the image is unscaled, and because the width is lowered, the sides are cut off.
The aim here is to have the width adjust accordingly, to different browser widths, and simply put, I want to replicate the image behaviour exactly the same way as it would be with a simple image with a percentage width set on it. I have thus far failed at it. And no, I cannot work around the scaling issue.
EDIT: I should also mention that adjusting the browser width merely adjusts how much of the image is cut off.
Solution:
First off, this only works if you have multiple images of the same size (perhaps of the same ratio, but I haven't tested). So I'll try and explain the solution as best I can, with the help of a hypothetical example:
Firstly, you need a placeholder image. This image MUST be the same size, or ratio, as the images you will be displaying. Doesn't matter what the image content is, but I went with a transparent image.
Now, let's say you want 5 images in your sprite, and they will be displayed on your homepage. Let's call these images index1.png, index 2.png etc. Here is the HTML to display it:
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite1" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite2" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite3" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite4" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite5" src="Images/index.png" />
</div>
You'll notice that there are two images inside a div. I'll get to the significance of the div class name in a moment. The trans class shows the transparent image, and the "sprite sprite5" classes show the actual image. I have two classes assigned for this image, just to keep the number of lines in my CSS to a minimum, and to make global image changes much simpler. You'll also notice that the difference between the contents of the five divs is simply the second class name for the second image changes from sprite1 to 5. I'll also explain this in a moment.
Now for the CSS:
.stretch15 {
width:15%;
max-width:258px;
overflow:hidden;
position:relative;
margin:0px auto;
display:block;
}
.trans {
width:100%;
height:auto;
display:block;
margin:0;
padding:0;
}
.sprite {
position:absolute;
top:0;
max-width:none;
max-height:100%;
display:block;
}
.sprite1 {
left:0;
}
.sprite2 {
left:-100%;
}
.sprite3 {
left:-200%;
}
.sprite4 {
left:-300%;
}
.sprite5 {
left:-400%
}
I used the class name 'stretch15' to show the width of the div. I use multiple div widths, so, I used some arbitrary name 'stretch', and then a number to let me know what the width is. So stretch15 tells me the div will be 15% wide, as seen in the CSS. By changing the width in the CSS for this div, you essentially replicate the function of (which I am aware isn't valid code, but it's the simplest way to show it).
As for sprite1 to 5, they all share the same styles in the sprite class, so all that was left was for me to identify which 'left' position to start displaying an image from. This is why the images have to all be the same size. If you move -100% to the left (or 100% to the right), you should land on the left side of the second image. -200% left gets you to the third image, and so on.
As for the rest of the stuff, I honestly wasn't too sure why they were there, other than the fact they they work. What I did was view the source code over here. Also, it really helps if you have something like Firebug (Firefox extension), where you can disable styles to see how things are affected. It will help you understand a lot.
