Соотношение сторон, использование CSS и изображений не правильно отображает? - PullRequest
Новая
       22

Соотношение сторон, использование CSS и изображений не правильно отображает?

2 голосов
/ 21 февраля 2012

Мне просто интересно, если это проблема с отображением в браузере или неверный CSS. Хороший способ масштабирования div в определенном соотношении сторон - использование прозрачного изображения в качестве дочернего элемента. У меня есть небольшое демо здесь. При необходимости этот вопрос.

Но почему это не работает, если я хочу высоту 100%.

Я проверял это в FF10, Safari 5.1.2, IE8 и IE9. (только ie8 выглядит правильно ...)

Надеюсь, кто-нибудь может объяснить проблему и, возможно, придумать решение.

С уважением, Рик 

<!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>

1 Ответ

1 голос
/ 22 февраля 2012

После просмотра вашего вопроса, у меня есть идея и предложение для вашего кода:

1. Различия между width:auto и width:100%, когда вы устанавливаете auto для ширины, вы оставляете браузер обрабатывать эту ширину, при каждом браузере они будут обрабатывать width:auto в соответствии со своими собственными правилами. С width:100% вы заставляете браузер расширяться до полной ширины. Я так думаю. Но наверняка ваш div может расшириться на 100% во всех кросс-браузерах, добавьте css min-width:100%, он будет работать так, как вы хотите правильно.

2. По поводу вашего CSS, мне нужно, чтобы вы взглянули на положение: относительно, эта строка кода не имеет смысла, в этой ситуации 

position:relative  = position:static

когда вы используете position: относительный, вы должны описать, где находится позиция, относительно которой вы хотите, чтобы ваш элемент был относительно, добавьте top или left для этого.

Надеюсь, это поможет вам!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...