0

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 ! :)

1
  • 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. Commented Mar 20, 2015 at 20:12

5 Answers 5

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;
}
Sign up to request clarification or add additional context in comments.

Comments

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.

Comments

0

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

Comments

0

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

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

Comments

0

Your answer is this JSFIDDLE.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.