Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I’m working on my first responsive website and I want to know how to make all of the images resize dynamically. I’ve worked around it for now, but I’d really like to rethink how I did this. Is there a jquery plugin for this that is easy to implement (I don’t know alot of js)? Is there a better way?
You actually don’t need any js for this – this could be achieved with CSS alone. As you figured out from looking at the source in the link in your comments, all that’s needed for dynamically resizing an image is the
max-widthproperty set to100%. However, if you want the image to increase in size dynamically as well then you’ll have to usewidth:100%.See the example in this jsFiddle. You’ll notice
max-widthdoes not go past the image’s resolution – on the otherhandwidthensures the image fills the container (which some see as a disadvantage because they lose the resolution when the width exceeds it’s original).There is a catch though,
max-widthproperty is not supported in IE6 or below – it was only introduced in IE7. This article here provides a workaround for that though.