Closed Bug 335575 Opened 18 years ago Closed 18 years ago

Bad rendering if image is set height:100% width:100%

Categories

(Core :: Layout: Images, Video, and HTML Frames, defect)

Product:
Core
Component:
Layout: Images, Video, and HTML Frames
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: mika.karjunen, Assigned: jdunn)

References

(
URL
)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; fi; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; fi; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

In case image is set height: 100% only normal size is rendered. If height: 100%; width: 100%; causes bad rendering: black marks on left side of the browser window.

Reproducible: Always

Steps to Reproduce:
1. Doctype html 4.01, xhtml 1.0 or xhtml 1.1
2. body{ <img src="./someimage.png" alt="" style="height: 100% width: 100%" /> }
3.

Actual Results:  
Bad rendering.

Expected Results:  
Image shoud fill up the browser window in case body{ padding: 0; margin: 0; } is also defined.
All browsers I checked (Firefox 1.5.0.2 rv:1.8.0.2 build 20060308, MSIE 7 beta 2 build 5346.5, Seamonkey 1.5a rv:1.9a1 build 2006042508, NS 8.1 [Firefox rendering engine rv:1.7.5 build 20060111]) render your testcase the same (except Opera 9 beta 1 build 8367).

In Firefox 1.5.0.2, if you do
Tools/Page Info/Media tab/Specified dimensions
you should see something like 
Specified dimensions: 989px X 29670px
Real dimensions: 10px X 300px

The browser (all browsers) first assign the width needed (989) (this order of doing things makes sense) and then adjust the height to be proportional to 10x300; so, 29670 is 30 times 989.

So, I believe you get the correct rendering.

If you want the image to fill the body node (with or without body margins), then you'll have to use absolute positioning. E.g.

<style type="text/css">
body {margin: 0px; padding: 0px;}
</style>

</head>

<body><img src="http://www.kaannos.net/Bugzilla/Bug_image_height/tausta.jpg" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; z-index: auto;" width="10" height="300" alt="">
<p>1st paragraph</p>
<p>2nd paragraph</p>
<p>3rd paragraph</p>
<p>4th paragraph</p></body>

And if you want the paragraphs to not be masked by the image, then change z-index: auto to z-index: -1; there is currently a bug being filed on negative z-index for the 1.8 branch.

Over here, this works in Opera 9.0 beta 1 build 8367, Firefox 1.5.0.2 rv:1.8.0.2 build 20060308, MSIE 7 beta 2 build 5346.5, Seamonkey 1.5a rv:1.9a1 build 2006042508, NS 8.1 (Firefox rendering engine rv:1.7.5 build 20060111).

Resolving as INVALID
Status: UNCONFIRMED → RESOLVED
Closed: 18 years ago
Resolution: --- → INVALID
I must agree that using css your suggetion the problem will be solved but I must disagree that the rendering that I get by simple <img style="width: 100% height: 100%" alt="" /> is correct. I only get a black line on left side of my browser. Opera renders it okay.

Thanks for your comment Mr Talbot.
Mika, I read again carefully the latest CSS 2.1 spec. on width and height for inline replaced element
CSS 2.1, Section 10.3.2: Calculating widths for inline replaced element
http://www.w3.org/TR/2006/WD-CSS21-20060411/visudet.html#inline-replaced-width
and
CSS 2.1, Section 10.6.2: Calculating heights for inline replaced element
http://www.w3.org/TR/2006/WD-CSS21-20060411/visudet.html#inline-replaced-height

The first process tries to establish/assign the width like this: "Percentage intrinsic widths are first evaluated with respect to the containing block's width"
So, <img style="width: 100%;"...> will set the image to be stretched or redimensionned to use 100% of the available space of its containing block (which is <body> in your webpage).

Then, 

"Percentage intrinsic heights are evaluated with respect to the containing block's height, *_if that height is specified explicitly_*" 

but the height of the <body> is not explicitly assigned: it's height: auto. So, the formatting rule that is then applied is: 

"If 'height' has a computed value of 'auto' and 'width' has some other computed value, and the replaced element has an intrinsic ratio, or, if both 'height' and 'width' have computed values of 'auto', and the element has no intrinsic height but does have an intrinsic width and intrinsic ratio, then the used value of 'height' is:

    (used width) / (intrinsic ratio)"

In your case, the intrinsic ratio is 10/300 (or 0.0333): so, this is the calculation made (and the correct one according to CSS 2.1) by Firefox 1.5.0.2 and Seamonkey when creating the page with your image.
By choosing position: absolute, other rules (given and detailed in 10.3.2 and 10.6.2) apply.
Gérard, once again, thank you for your comment. I also read the specs and now agree with you. It clearly says that using absolute option is the way. Right now I am only wondering why the browser only shows black line on left. Otherwise there does not seem to be a logic error in the rendering engine.
-My mistake. Thanks for correcting.
Product: Core → Core Graveyard
Product: Core Graveyard → Core
You need to log in before you can comment on or make changes to this bug.