I did a bit of experimenting, and found that this works well in Google Chrome:
- Code: Select all
<div align="center" class="image" style="max-width:30%;">
<img src="/images/medium/843149.jpg" alt="Descending ..." style="width: 100%;">
<span class="caption">Descending a steep snow field on Schesaplana</span>
This code is very similar to the code that's generated when you use the regular way to insert an image in page on SP (using the new editor). There are two key differences:
1) The div around the image doesn't have a fixed size, but is set at 30% instead. That's 30% of whatever else it is contained by. To use the full width of whatever it is contained by, simply use 100%.
2) The image width is not fixed either, but set at 100% instead. That's 100% of whatever it's contained by, which, in this case, is the div!
So, if your page is too wide, then, instead of using fixed size table cells, divisions and images, simply use relative ones where appropriate. You get the idea.
Whether this works in other browsers, and in older versions, I don't know. You'll have to test that yourself.
By the way, the example uses the medium version of the image. In your case, you may want to use the original version instead. However, if your original images are very big, remember that all the MB's are downloaded first, and only resized by the browser of whoever is viewing the page. If you use a lot of big images that way, loading the page will be slowed down; with a slow connection slowed down to the point of being useless. I've looked at SP pages while travelling, and not all internet cafés in the world have a fast connection...
Good luck and please let us know what you find,