automatic resize pictures when scale down the browser page without break to new line

Question

I have 3 images stacked horizontally (each image is next ot the other). my goal is to keep those images stacked horizontally when i scale down the page size. i would like the pictures to automatically resize down without breaking it to the next line. i don't want to use percents (%) for the size of the images. I don't want to set the size of the images at all.

When I am using bootstrap and I scale down the page, when the page size become smaller then the pictures size, then the image on the right breaks to new line, the same thing happens for the second image, until all the images stacked vertically. on this point, when I scale down the page even more I get exactly what I wanted - the pictures are resizing according to the page size.

please help me to get this behavior without breaking the pictures to new lines.

this is my html:

 <body>
     <img src="img/test.png" />
     <img src="img/test.png" />
     <img src="img/test.png" />
</body>

Thanks...

Bit of search might help, check this answer: http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang — Shahar Galukman, Aug 16 '13 at 21:55

bluetoft · Answer 1 · 2013-08-16T22:15:16.667

@media (min-width:450px;){
   img{
       width:50%;/*or whatever floats your boat*/
   }
}

You can modify the min-width: value to customize your needs. This won't handle resizing. Just different media sizes.

You can use jQuery.resize to handle actually resizing a browser window like so:

$(window).resize(function(){

    var div = $('#images');//images container
    div.find('img').each(function(k,v){

        $(v).width((div.width()/4));//resize each image however you want
    });
});

score 0 · Answer 2 · answered Aug 16 '13 at 22:05

Wrap your images in whatever container, say a div, then you have two options depending on the behaviour you want:

a) Set a css min-width property for the container and don't let it go narrower than that. b) Set a css overflow-x property for the container and let the images either hide, show a scroll bar, ...

automatic resize pictures when scale down the browser page without break to new line

2 Answers2