CODEWITHSUNDEEP
htmlcssimage
Solomon Closson
Solomon Closson

Reputation: 6217

4 Images side by side to take up entire width of browser window

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.

Upvotes: 0

Views: 1021

Answers (2)

npage
npage

Reputation: 1288

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/

Upvotes: 1

Paul Calabro
Paul Calabro

Reputation: 1906

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)...

Upvotes: 1

Related Questions