1

I have 4 images (all the same width and all the same height) that I want displayed side by side on the very top of the webpage, but the trick is that is needs to take up the entire browsers width $(window).width() in jQuery.

My questions are:

First, is this possible?

If so:

  1. What is the best way to do this for all browser widths (or most of them)?
  2. Should it be 1 image instead of 4?
  3. What are the advantages/disadvantages of either way (1 image vs. 4 images, and vice versa)?
  4. Do I have to use jQuery or another language to calculate the screen's width and load up different size images for each different size screen width? Or can this be done with CSS natively?
  5. What width size is recommended to use on, either, all 4 images, or if I make these images 1 image, what width would be recommended than?

NOTES: I don't want to stretch the images wider, cause that will cause it to look distorted, but if I have big images and size them down, than it affects the load of the page (dropping performance). How to do this so that I don't have to make any sacrifices in look and/or performance? If possible, I would also like it to look right in phones... but that's not a huge priority, but would be nice, if possible.

Solomon Closson
  • 6,111
  • 14
  • 73
  • 115
  • i am not sure what you want to do. you say you dont want images to stretch but take up entire width – btevfik Mar 19 '13 at 23:01
  • I have 4 images that need to fill the entire width of a browser. Any width that is shown. I don't want the images to stretch up in width, but maybe resize down is my only other option. In any case, what size width is recommended for this on each image? – Solomon Closson Mar 19 '13 at 23:05
  • i think you need something like this http://adaptive-images.com/ – btevfik Mar 19 '13 at 23:06
  • Can there be space between the images? A drawing would ne helpful. –  Mar 19 '13 at 23:09
  • No space between images... I'll try and get something together in Photoshop to illustrate. @btevfik - I can't use that because, unfortunately the server has NO PHP or APACHE support! – Solomon Closson Mar 19 '13 at 23:13
  • @SolomonClosson then you can do this http://drupal.org/project/cs_adaptive_image – btevfik Mar 19 '13 at 23:24
  • @btevfik - Sorry, I'm not using a drupal environment either. I wouldn't be able to if the server does not provide PHP anyways. – Solomon Closson Mar 19 '13 at 23:30

2 Answers2

1

I would recommend, if possible, making the 4 images into 1 image if you're concerned with scalability. You can also then specify the dimensions of the image, which helps load time since the browser doesn't have to figure out the dimensions of each image (which is what it would need to do if you gave it percentages for width size). If this is for some kind of background, perhaps, edit the last image in such a way that when the browser expands to a greater width than the image dimension, it repeats forever (e.g. background-repeat in CSS)...

Paul Calabro
  • 1,748
  • 1
  • 16
  • 33
1

The images need to be set to 50% the width of the parent element. In my example that parent element is the body:

<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>

Css:

.half-width-img{
width:25%;
height:auto;
float:left;
}
html,body{
margin:0 0 0 0;
padding:0 0 0 0;
}

http://jsfiddle.net/j7L4h/2/

npage
  • 1,258
  • 10
  • 14