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

Мне просто интересно, является ли это проблемой рендеринга браузера или неправильным 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>

image css aspect-ratio
person Rik    schedule 21.02.2012    source источник
comment
Свойство width не имеет смысла для <span> (поскольку у него есть display: inline), поэтому оно просто ничего не делает для .holder2.   -  person Alexander Pavlov    schedule 21.02.2012
comment
@Alexander .hoder2 фактически не используется в демонстрации (не отображается в разметке)   -  person Jonathan Nicol    schedule 22.02.2012

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

position:relative  = position:static

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

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

person Raphaël VO    schedule 22.02.2012
comment
Собственно, ваше замечание по поводу position:relative не совсем верно. Хотя вы правы в том, что он будет отображаться в том же месте, как если бы вы не указали position, элемент будет вести себя по-разному в отношении float, z-index и так далее. (Я не вижу, чтобы это имело значение здесь, в примере с ОП, но это может иметь значение на его реальном веб-сайте.) - person Mr Lister; 22.02.2012
comment
Да, я упомянул, что эта строка кода не имеет смысла в его примере, но она будет работать, если у него есть другой дочерний элемент со своим стилем, таким как position:relative или как вы сказали. - person Raphaël VO; 22.02.2012
comment
@MrLister, не могли бы вы рассказать мне, как z-index может изменять положение, может быть, это поможет мне узнать больше о css, спасибо! - person Raphaël VO; 22.02.2012
comment
Я имел в виду, что position может влиять на z-index, а не наоборот. Например, если вы удалите position:relative из этого примера (или измените его на static), вы увидите что z-index перестает работать. - person Mr Lister; 22.02.2012
comment
@Tuong Спасибо, что посмотрели, я еще раз проверю использование auto в разных браузерах. О вашей подсказке позиции, действительно в этом примере и не должно быть. Но при использовании элементов внутри этого держателя, такого же размера, как и у родителя (держателя), я использую абсолютную позицию для дочерних элементов. Таким образом, я могу масштабировать текстовую область с изображением в правильном соотношении сторон: D - person Rik; 23.02.2012