What are the options with responsive images being served in a lightbox?

 

Sash posted this cool link http://webdesignandsuch.com/responsive-image-lightboxes-websites/, but when you actually load the images, they aren't really that responsive. They change in size, but they don't fill the screen really. Or this seems cool but when using a lightbox javascript I think they could clash http://adaptive-images.com/.

 

So I'm thinking the only proper way to serve images reliably, is to have different sized images and run a script to determine the page size, then serve the different images.

To make images responsive I usually set the max-width property to a percentage.

Then the image will always be a percentage of it's parent container - be it the page or a div.

 

Also don't set a width or a height for the image in the HTML or it won't scale properly. This won't work in IE6 but who develops for that nowadays?

 

I hope this is what you were looking for.

Thanks rbrt, so that's an inline style to the image on the page, and then media queries on your external stylesheet that will change the size of the containers of the page.

What if you have a div structure like this:

<div id="container> contains whole page (left open)

<div id="navbar"></div>

<div id="page content">Actual page content i.e. articles and images</div>

</div>

With this format wouldn't the container fit the whole page. Then page content would only be a portion of the page (not 100%)?

I'm personally against inline styles in most circumstances.

 

I'd recommend you give the image a class and set the max width and any other properties such as margins and padding on your external stylesheet - I usually apply the max width to all media types so if you plan to do the same do this above any media query's so it will cascade down.

 

The page container will be 100% if you set the width property to 100% and ensure you remove any margins from the html document:

 

html {
margin: 0;
padding: 0;
}
#container {
width: 100%;
}
image-class {
max-width: 100%;
}

 

As long as you don't make any borders, margins etc on the div container or html container it will span the full width of the screen.

if you do this then the images will span the full width of the screen.

 

Just noticed on the second line of your code your missing a " after the ID declaration.

Thanks Rbt.

Note in my code I've had to remove the dot from the start of the class name as this forum seems to think I am posting a link and have not amassed enough posts to do so yet.

i dont know which script u used but this script works

 

http://fancyapps.com/fancybox/

 

they using different sized images though as u mentioned

 

 

but there are responsive images too