Image resize with browser - html

Question

I want to resize images when the browser is resized but I would like to keep a border of 30px on both the left and bottom of the image when doing so. Like this: http://www.jennyvansommers.com/non-commissioned/corner/#347
Is there a simple way to do this using CSS?
Thanks in advance

Answer 1

I would try putting the image inside of a container, the container having 100% width and height, with padding on the left and bottom of 30px, and the image inside it also having 100% width and height.
EG
<div id="imageWrapper">
<img src="imageurl" />
</div>
<style>
#imageWrapper{width:100%;height:100%;padding:0 0 30px 30px}
#imageWrapper img{width:100%;height:100%;}
</style>
The wrapper should fill the window, and the image should fill the wrapper out to the padding. This will most likely stretch your images though if the shape of the image differs to the shape of the window. If you want to keep the aspect ratio of the image try just setting the width or the height of the img, but not both.
Hope this helps :)
EDIT:
Not sure if you want to fill the screen, play with img{max-width:100% and img{max-height:100% instead of width and height if you want the image to retain it's natural size unless the window is smaller than it..

Answer 2

I would expect setting a min-width and min-height of 30px, with a relative width and hiehgt of 50% or whatever relative size you would like would achieve this sort of effect
.image-resize {
min-hieght:30px;
min-width:30px;
height:50%;
width:50%;
}
Sorry misread your question there, a border? or a margin? so somthing like
margin-left:30px;
margin-bottom:30px;
instead of the height and width, you could use border-left and border-bottom i suppose using a transparent border, but i perfer margin.
But relative sizing i think is what you want? so it resizes with the browser, or actually resizes relative to its parent so depends where it exists in the dom