HTML&CSS - Resize all my images

Question

I have a folder full of thousands of image and I want to show those images.

I've done that already, but my problem here is wit hthe size of the images. The images in my folder are totally different format and size. I've succeeded to resize them all but whenever I do that, when I change the browser size they don't resize aswell, they stay like I told them to.

What I want to do is put a maximum size that if the browser is big enough they are this size. But if the browser shrinks, they react instantly to that and change size.

I've tried for 2 hours now and I can't find a way to do that.

PS: I'm using bootstrap

Thanks ! :)

You could attach an event listener on the browser's resize event and then change the image size based on the new stats of the porthole size. — scrappedcola
– scrappedcola, Commented Mar 20, 2015 at 20:12

Brian Ray · Accepted Answer · 2015-03-20 20:11:40Z

1

How about this? The images will be a maximum size of 1000 pixels, but will be 100% of the browser width otherwise.

img {
    width: 100%;
    max-width: 1000px;
}

answered Mar 20, 2015 at 20:11

Brian Ray

1,4913 gold badges20 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joshua Whitley · Accepted Answer · 2015-03-20 20:13:10Z

0

The following should give you what you're looking for:

img {
    height: 100%;
    width: auto;
    max-height: (put max height here in px)px;
}

As long as your images aren't smaller than their containers, this will work.

answered Mar 20, 2015 at 20:13

Joshua Whitley

1,1867 silver badges21 bronze badges

Comments

Costas Apostolopoulos · Accepted Answer · 2015-03-20 20:13:39Z

0

Add class="img-responsive" to your <img> tag. See this for details.

answered Mar 20, 2015 at 20:13

Costas Apostolopoulos

364 bronze badges

Comments

DudiDude · Accepted Answer · 2015-03-20 20:16:22Z

0

you could use the class img-responsive, that bootstrap offers

http://getbootstrap.com/css/#images-responsive

answered Mar 20, 2015 at 20:16

DudiDude

4234 silver badges14 bronze badges

Comments

Istiak Tridip · Accepted Answer · 2015-03-20 20:31:05Z

0

Your answer is this JSFIDDLE.

img {
display: block;
width: 100%;
max-width: 800px;
}

answered Mar 20, 2015 at 20:31

Istiak Tridip

1991 silver badge14 bronze badges

Collectives™ on Stack Overflow

HTML&CSS - Resize all my images

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related