No replies
princesskarlotta's picture
Last seen: 12 years 28 weeks ago
Timezone: GMT+1
Joined: 2010-02-01
Posts: 1
Points: 2


I'm a photographer trying to circumvent the crazy problem of image size v. screen resolutions. The new site I'm working on is structurally composed of 3 parts: a top menu (div), "glued" to the top of the browser; and a bottom menu (div), "glued" to the bottom of the window. It's the content, the middle part, that's variable in size. If it's text or thumbnails, I have no problems making it work at different screen resolutions; however, on the welcome page, Id love to display one photograph right out there in the middle, and I have no idea how to make that picture change size as the div changes size with the browser window.

I've tried placing the "welcome" image inside the "content" div this way :

#content {
	overflow: hidden;
	position: absolute;
	width: 80%;
        left: 10%;
	top: 110px;
	bottom: 190px;
#img.welcome {
	height: 100%;
	position: absolute;
	top: 0;

but all it does is keep my image at 100% of its own size, not at 100% of the div it's placed in.

Any thoughts?

Many thanks for your help!

Picture 5.png1.05 MB
Picture 6.png477.35 KB