Well media queries would be the way to go. I'm just starting to understand these, so anything I advise might need work. Beverley is more experienced with these. Hopefully she will have a look at what I put forth here and add any helpful comments.
The way I see it, for this sort of thing you first have to determine the various styles that will be good for various screen resolutions. It would be nice to be able to use a percentage width for this, but in the one emulator I'm using, that doesn't seem to work well.
Anyways, the div that shows the larger image has an id of lbImage and the way the script works is that the larger image becomes this div's background image.
I found that on an iphone 5 emulation that has a little more than 500px width available with in portrait view, that adding these styles worked well:
Code:
max-width: 500px;
background-size: contain;
As a media query in the stylesheet I think that would look like so:
Code:
@media screen and (min-width:540px) and (max-width:600px){
#lbImage{
max-width: 500px;
background-size: contain;
}
}
For other devices - screen widths really, you would do a similar thing. The min and max on the media line would change to fit the device/screen you are thinking of, while the max-width rule for the #lbImage selector would be set to fall within that range and to fit well. The one thing that would not change is the background-size: contain; rule (it forces the background image to fit inside the div). So for a screen that was - say 320 px wide, something like so could be added to the stylesheet:
Code:
@media screen and (min-width:300px) and (max-width:320px){
#lbImage{
max-width: 250px;
background-size: contain;
}
}
And you would need to make up media query blocks like these for all anticipated ranges of widths that might be encountered.
I think you can see why a percent max-width for lbimage would be so much easier. But in the emulator I tried that in, the lbimage was off kilter to begin and each time you hit next, it got smaller by the same percentage. If - and that's a big if, if that's just an artifact of the emulator, we could set max-width to something convenient like 90% and just let the browsers and the script work the rest out. One rule set of:
Code:
@media screen and (max-width:650px){
#lbImage{
max-width: 90%;
background-size: contain;
}
}
Would then do it. Try that first, you might get lucky. Otherwise, as I say, you will probably have to make up rules for all of the possibilities of screens less than 650px wide.
BTW, again in the emulator I used (Chrome's native device emulator) The iPhone 5 was fine with that page 'as is' if viewed using its landscape mode. Something to think about.
Reply With Quote
Bookmarks