homepage Welcome to WebmasterWorld Guest from 54.237.38.30
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Force image to layer size
Can this be done?
hannamyluv

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 11022 posted 8:49 pm on Sep 15, 2005 (gmt 0)

Is there a way to force an image to resize to a layer's dimentions without putting a height or width attribute in the img tag?

I have several images of different sizes that I am dropping into a template and some are wider than others and some are taller than others. I just want the tall or wide ones to resize to the layer size rather than pushing the layer out overtop of other elements on the page.

 

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 11022 posted 10:28 pm on Sep 15, 2005 (gmt 0)

Put this in your CSS?

img { width: 100%; }

Althoug that'll only do width or height, not both (it'll stretch if you do both. Maybe:

img { max-width: 100%; max-height: 100%; }

iamlost

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 11022 posted 10:48 pm on Sep 15, 2005 (gmt 0)

Yes.

The main concerns are that you are forcing the shape and size which may cause distortion and blurring, i.e. a stock 100x100px image will look mis-shapen at 200x300px and the pixels may be apparent/blur at 1000x1000px.

CSS:

* {padding: 0; margin: 0;
}
#big {width: 200px; height: 300px; border: 2px #f00 solid;
}
#small {width: 100px; height: 100px; border: 2px #f00 solid;
}
#big img, #small img {width: 100%; height: 100%; vertical-align: bottom; /* for IE */}

HTML:

<div id="small">
<img src="test.jpg" alt="" />
</div>
<div id="big">
<img src="test.jpg" alt="" />
</div>

hannamyluv

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 11022 posted 11:14 pm on Sep 15, 2005 (gmt 0)

Well, that almost fixes the problem. I am more looking for it to kick in only if the image is bigger than the layer.

For example, let's say the layer's width is 100px. One image is 65px wide and the other is 120px. I would like the one that is 65px wide to display as is, while the one that is 120px wide to display at only the 100px wide the layer is.

If I can do this, I don't mind distortion on the second image as they only make up a small percentage of the images.

iamlost

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 11022 posted 11:19 pm on Sep 15, 2005 (gmt 0)

Robin_reala's solution (max-width/height) either squeezes the image in one or both dimensions or expands to stock size and stops leaving unfilled div in one or both dimensions. Plus for IE you would have to add a .htc script.

You could make the containing div larger than any image (i.e. if largest image width is 400px and largest height is 500px make div that size) and center images within it. It requires a script to dynamically calculate each image's dimensions and margins and is a pain but is possible.

Alternatively if you are able to dynamically change your CSS file contents (and force reload) you can put the image in the div as: #div {background: url(test.jpg) no-repeat center center;} with again the div's width/height at least the size of the largest corresponding image dimension.

I just like to float images and let the other stuff work around them but that may not be feasible in your case.

I would love a simple answer myself :-)
Anyone?

iamlost

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 11022 posted 11:32 pm on Sep 15, 2005 (gmt 0)

Our posts crossed in the ether ...

I am more looking for it to kick in only if the image is bigger than the layer.

I can't think how to work that without scripting. See previous post.

Normally not worth the effort, especially if most images can work within the specified div size and ratio (width-height). Unless you can ignore IE or don't mind adding a .htc file ... in which case max-height/width works fine.

Farix

10+ Year Member



 
Msg#: 11022 posted 2:47 am on Sep 16, 2005 (gmt 0)

Another, more sampler solution would be to scale the images to fit into the box using an image editor. Then you don't have all that extra muck in your code to deal with images larger then the size of your allowed boxes because you won't have any images larger then the boxes to begin with.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved