----- Original Message ----- From: "Henrik Nyh" <[EMAIL PROTECTED]> To: <css-d@lists.css-discuss.org> Sent: Saturday, November 15, 2008 2:26 PM Subject: [css-d] div doesn't contain img if small window, no floats involved
> Hi, > > I'm seeing an unexpected issue where an image inside a div is not > contained by the div, if the browser window is smaller than the image > width. There are no floats. What I expect is for the div to contain the > image, so the div is > stretched out to the width of the image plus the div padding. > > Tiny test case here, with inline CSS: http://nyh.name/x.html The > source of that page is also at the end of this mail. > > I don't want the image to be scaled down in size, so workarounds like > using max-width:100% on the img don't cut it. This is for a "show > full-size image" type page. > Henrik: I can only give you a partial answer. The image is 1280px x 800 px, so the behavior is not unexpected in smaller viewports. Your CSS constrains the dimensions of the <div> relative to the viewport. If the viewport is not 1280+60+2+20 = 1362px (more or less) in dimension, the image will never be constrained and centered in the <div> because the image overflow property defaults to visible. If you want to prevent the image from overflowing the <div>, you have to declare img {overflow: hidden;}, although that doesn't resolve an issue with the right padding not being present. Another thing, if the viewport is larger than 1362px, the div will be (much) larger than the img. I think you're SOL if you don't want to scale the image. Otherwise, declare img {width: 100%} in the CSS, or do the same thing in the XHTML, <img src=.........jpg width="100%" alt="" /> Peter www.fatpawdesign.com developing in: WinXP/SP2 + FF3.0.3 at 1024x768 and 1280x1024 checking in: IE8.0beta/O9.61/Av11.6/Cr0.2/Orca1.1 In God we trust, all else bring data... ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
