<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body>
<p>
<div>
<b><a class="bz_bug_link
bz_status_NEW "
title="NEW - Webkit not recalculating width when changing height of absolute-positioned div with image"
href="https://bugs.webkit.org/show_bug.cgi?id=152588#c2">Comment # 2</a>
on <a class="bz_bug_link
bz_status_NEW "
title="NEW - Webkit not recalculating width when changing height of absolute-positioned div with image"
href="https://bugs.webkit.org/show_bug.cgi?id=152588">bug 152588</a>
from <span class="vcard"><a class="email" href="mailto:zalan@apple.com" title="zalan <zalan@apple.com>"> <span class="fn">zalan</span></a>
</span></b>
<pre>(In reply to <a href="show_bug.cgi?id=152588#c0">comment #0</a>)
<span class="quote">> Created <span class=""><a href="attachment.cgi?id=267987" name="attach_267987" title="Page that demonstrates bug">attachment 267987</a> <a href="attachment.cgi?id=267987&action=edit" title="Page that demonstrates bug">[details]</a></span>
> Page that demonstrates bug
>
> StackOverflow issue, has an example you can run:
> <a href="http://stackoverflow.com/questions/34506314/webkit-bug-rendering-image-in">http://stackoverflow.com/questions/34506314/webkit-bug-rendering-image-in</a>-
> centered-absolute-div
>
> Basically I have a relatively position div, with a absolutely positioned div
> child. Inside the absolutely positioned div is a (square) image:
> <div relative>
> <div absolute>
> <img />
> </div>
> </div>
>
> Both absolute and img have height: 100%, so when relative changes height, so
> should both children. The image should then recalculate it's width to
> preserve it's aspect ratio, which in turn will change its parent (absolute)
> to change width. However, when relative's height is changed (via javascript
> or the debugger) the widths are not properly updated. If relative's height
> is decreased, no widths are recalculated and the image becomes squished
> vertically. if relative's height is increased, the image's width is
> increased to maintain the aspect ratio, but its parent (absolute) does not
> increase width, causing the image to overflow and be displaced to the right
> (in the example, it should stay centered).
>
> Attached is an example page that shows this bug (also included in the
> stackoverflow).</span >
You could add "-webkit-aspect-ratio: from-intrinsic;" to your img element to preserve ratio.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>