- This topic has 4 replies, 2 voices, and was last updated 8 years, 11 months ago by .
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
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
Which image are you trying to change?
Be sure that you don't have width and height declared inline in your image tags.
Do you see any inline code that I've missed? The images are on the home page.
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?
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.
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.
© 2023 WPEngine, Inc.