Take the 2-minute tour ×

I am creating a webpage..as usual. But I have a problem. Lets say that I have a div called "background" and in this div I load a huge amount of images with the <img>-tag. The only problem is that the images got float:left; on them which makes them fall into a new line since it can't display the full image.

I want, however, to display the image so you can see a part of it but so it stretches from one side to another and all the way down to the bottom of the screen. I don't want any scroll bars and so on. Is there a quick way of doing this? Do I need to use javascript or can I solve this in css, and if that's the case, can someone point me in the correct direction? :)

Here is an example of what I'm trying to do.

share|improve this question
If you have an example of what you want to do, why haven't you tried dissecting the code that creates the desired output? Ask specific questions when you run into roadblocks during your coding. –  MetalFrog Mar 13 '12 at 19:56
I have tried to, but their code is minified and compressed. I can't figure out how to keep blocks from creating a new line. I am trying to be specific, but I don't know what to ask for since I've never done anything like this before. –  cubsink Mar 13 '12 at 20:00
I guess what I am asking for is directions how to proceed. I am not asking for a full solution. –  cubsink Mar 13 '12 at 20:02
You need to set a max-height/width and float them to make them fall into line. If your images are not the exact same size/aspect ratio, you'll run into problems. Also, you'll always have them go to a new line as they run out of space horizontally. –  MetalFrog Mar 13 '12 at 20:08

5 Answers 5

up vote 1 down vote accepted

The site you gave as an example uses overflow:hidden and width:110% on their body ... that's what makes it possible for partial images to be shown.

share|improve this answer

I guess you're asking for the logic?

get viewport width
determine a width for images that will tile evenly
create row of images
loop until rowcount*image height < viewport height
share|improve this answer
Well I have a lot of thumbnails with a fixed width and height. What I should've asked was "how can I make stop new line but still be using float", if that's even possible. I don't want the images to tile evenly, I want them to continue on the same height. –  cubsink Mar 13 '12 at 20:12
It sounds like you have some code already - can you post the snippet on a fiddle or something like that? I'm still confused - you want all the images on one row, stretched vertically in height but retaining width? –  ElatedOwl Mar 13 '12 at 20:18
I hope you understand what I mean. You can clearly see the gap at the right when image continues on a new row. What I want is to be able to view that image "as much as possible". But the rest of the image that doesn't show must not create a scoll bar. –  cubsink Mar 13 '12 at 20:29
I get what you're saying - the logic above is still relevant. I don't think there is a built in way to wrap a partial image. I'll update the logic to be a little more JS specific so you have a starting base for research. –  ElatedOwl Mar 13 '12 at 20:34
Ok, thanks a lot. I guess I need to chance the resize function as well because if I am going to use js to determine the image width I don't really need thumb-nails. Or maybe, if it's a big image. I will need to maintain ratio anyway :) –  cubsink Mar 13 '12 at 20:40

Something like this?

  <style type="text/css">
    ul {display:block; width=100%;}
    ul li {float:left;}
    ul li img {width:150px;}
  <div class="background">
      <li><img src="imgs/myimage01.jpg" alt="my image 1"/></li>
      <li><img src="imgs/myimage02.jpg" alt="my image 2"/></li>
      <li><img src="imgs/myimage03.jpg" alt="my image 3"/></li>
      <li><img src="imgs/myimage04.jpg" alt="my image 4"/></li>
      <li><img src="imgs/myimage05.jpg" alt="my image 5"/></li>
      <li><img src="imgs/myimage06.jpg" alt="my image 6"/></li>
      <li><img src="imgs/myimage07.jpg" alt="my image 7"/></li>
      <li><img src="imgs/myimage08.jpg" alt="my image 8"/></li>
      <li><img src="imgs/myimage09.jpg" alt="my image 9"/></li>
      <li><img src="imgs/myimage10.jpg" alt="my image 10"/></li>
      <li><img src="imgs/myimage11.jpg" alt="my image 11"/></li>

As stated in the comments, the shape and size of the source images is important. It's much easier if they are standardised.

share|improve this answer
Yeah, well I have a lot of thumb nail pictures and they are standardised. But if chance resolution it will affect the images and maybe will not stretch perfectly. Is the only solution to calculate the resolution and then set the height and width? –  cubsink Mar 13 '12 at 20:21

BTW use Firebug in Firefox to find/test the CSS layout of websites. What they did in your example is create a CSS class that restricted the image class to a size and float left.



<img class="class_name" src="image_source"/>
share|improve this answer
Yeah I also noted that. But how does that explain that you can see part of pictures that there isn't enough space to view? –  cubsink Mar 13 '12 at 20:19

just to make same height for all images in 'background div, suppose 100px height, and all images in one line

#background {
#background img {
   height: 100px;

if don't want to in single line , just remove white-space:nowrap

share|improve this answer

Your Answer


