Resizing an image dynamically with CSS as the browser width/height changes?

[Doug]

12.23.2014

Hello, Community!

Does anyone know how can I resize an image dynamically with CSS as the browser width/height changes?

Is this possible? I tried this code modification and it didn't work for me for this website: http://nct-archive.org

http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang

Thank you,
Doug Arnold

http://nct-archive.org

[anotherusername]

Which image are you trying to change?

Be sure that you don't have width and height declared inline in your image tags.

[Doug]

Hi!

I am trying to change http://www.nct-archive.org/nct-archive-content/uploads/2014/12/Smithsonian1.jpg and http://www.nct-archive.org/nct-archive-content/uploads/2014/12/Smithsonian2.jpg

Do you see any inline code that I've missed? The images are on the home page.

Thank you,
Doug

P.S. If you strip out the width and height inline, how do you control the size so it's not larger than one wants?

[anotherusername]

You appear to be calling that first image with this code:

<img class="alignleft wp-image-4174" src="http://www.nct-archive.org/nct-archive-content/uploads/2014/12/Smithsonian1.jpg" alt="Bandbox from the Kendall Collection" width="250" height="200" />

So that is going to prevent your image from resizing.

P.S. If you strip out the width and height inline, how do you control the size so it’s not larger than one wants?

One thing you can do is use the max-width css tags. You can use either a pixel value or a percentage value (and then the image would be related to the size of its parent element).

I would suggest reading up on the difference in CSS between width, min-width, and max-width, but in short, when you say, width="250", it is telling the image to be EXACTLY 250px ALL THE TIME, and not to be larger nor smaller.

[Doug]

Thank you, anotherusername.

I greatly appreciate your help.

As a test, I stripped out the inline width and height values from the Bandbox image and added to the img selector the max-width of 100% and a height of auto.

Doug

[Author]

Posts