Menu
Im just wondering if this is a browser rendering issue or incorrect css. A nice way to scale a div in a defined aspect-ratio is, using a transparent image as a child element. I have a small demo here. Under need this question.
But why doesn't it work nicely if I want a height of 100%.
I tested this in FF10, Safari 5.1.2, IE8 and IE9. (only ie8 seems to render correctly...)
Hope somebody can explain the problem and maybe come up with a solution.
Regards, Rik
<!DOCTYPE html>
<html lang="uk">
<head>
<title>test</title>
<style>
html
, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: green;
}
/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */
.holder1 {
position: relative;
display: inline-block;
height: 100%;
width: auto;
background: yellow;
border-right: 1px solid red;
}
.holder1 .ratio {
display: block;
height: 100%;
width: auto;
}
/* AUTO HEIGHT - works fine */
.holder2 {
position: relative;
display: inline-block;
height: auto;
width: 100%;
background: yellow;
border-right: 1px solid red;
}
.holder2 .ratio {
display: block;
height: auto;
width: 100%;
}
</style>
</head>
<body>
<span class="holder1">
<img src="/images/empty_image.png" class="ratio" alt="Ratio image">
</span>
</body>
</html>
269
After view your question, I have some idea and suggest for your code:
1.Different between width:auto and width:100%, when you set auto for width, you leave the browser handle this width, with every different browser, they will handle width:auto follow their own rules. With width:100%, you force the browser must expand to have full width.That is what I think.
But for sure your div can expand 100% on every cross browsers, add css min-width:100%, it will do as you wish correctly.
2.About your CSS, I need you take a look at position:relative, this line of code have no sense, in this situation,
position:relative = position:static
when you use position:relative, you must describe where is the position you wish your element relative to, add top or left to do it.
Hope it can help you!
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
