CODEWITHSUNDEEP
cssimageaspect-ratio
Rik
Rik

Reputation: 1323

Aspect-ratio, using CSS and image doesn't render correcty?

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>

Upvotes: 3

Views: 996

Answers (1)

Rapha&#235;l VO
Rapha&#235;l VO

Reputation: 2640

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!

Upvotes: 1

Related Questions