Currently, with STYLE, i can use "width: 100%" and "auto" on the height (or vice versa)...
but i still can't constrain the image into a specific position, either being too wide or too tall, respectively...
any ideas?
+1
A:
If you only define one dimension on an image the image aspect ratio will always be preserved.
Is the issue that the image is bigger/taller than you prefer?
You could put it inside a DIV that is set to the maximum height/width that you want for the image, and then set overflow:hidden. That would crop anything beyond what you want.
If an image is 100% wide and height:auto and you think it's too tall, that is specifically because the aspect ratio is preserved. You'll need to crop, or to change the aspect ratio.
Please provide some more information about what you're specifically trying to accomplish and I'll try to help more!
--- EDIT BASED ON FEEDBACK ---
Are you familiar with the max-width and max-height properties? You could always set those instead. If you don't set any minimum and you set a max height and width then your image will not be distorted (aspect ratio will be preserved) and it will not be any larger than whichever dimension is longest and hits its max.
Andrew
2010-09-20 13:20:03
if the image is taller than it is wide, I would use height=100% and width=auto, if the image is wider than it is tall, I would use width=100%, height=auto. i simply never know what the case is? cropping by max height/width would work- but if there's a way not to- i'd rather use that...
thesocialhacker
2010-09-20 16:15:13
Well, are you designing a fluid or fixed-width layout? If you're in a fixed-width layout you can always set your width to 100% and the image will scale appropriately, but it may be very tall. Are you trying to position an image in a block of text, or use it as a banner, or as a background? If you could show the page where you're planning to use it or describe the context I could help you more. See edits above as well.
Andrew
2010-09-21 01:20:34