纵横比，使用 CSS 和图像无法正确呈现？答案

【问题标题】：Aspect-ratio, using CSS and image doesn't render correcty?纵横比，使用 CSS 和图像无法正确呈现？
【发布时间】：2012-02-22 16:55:07
【问题描述】：

我只是想知道这是浏览器渲染问题还是不正确的 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>

【问题讨论】：

width 属性对<span> 没有意义（因为它有display: inline），所以它对.holder2 没有任何作用。
@Alexander .hoder2 实际上并未在演示中使用（未出现在标记中）

标签： css image aspect-ratio

【解决方案1】：

查看您的问题后，我对您的代码有一些想法和建议：

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 时，你必须描述你希望你的元素相对的位置在哪里，添加 top 或 left 来做到这一点。

希望对你有帮助！

【讨论】：

实际上，您对position:relative 的评论并不完全正确。尽管您是正确的，它将显示在与未指定 position 相同的位置，但该元素在浮动、z-index 等方面的行为会有所不同。（我认为这在 OP 的示例中并不重要，但它可能会对他的真实网站产生影响。）
是的，我提到他这行代码在他的示例中没有任何意义，但如果他有其他具有position:relative 或您所说的样式的子元素，它将起作用。
@MrLister，你能告诉我z-index是如何改变位置的吗，也许它会帮助我更多地了解css，谢谢！
我的意思是position 可以影响z-index，而不是相反。例如，如果您从this example 中删除position:relative（或将其更改为static），您将看到z-index 停止工作。
@Tuong 感谢您的浏览，我将仔细检查“auto”在不同浏览器中的使用。关于你的“位置”提示，确实在这个例子中，不需要在那里。但是当在这个持有人中使用元素时，其大小与父（持有人）的大小相同，我在子项上使用“绝对”位置。这样我就可以用正确的纵横比来缩放文本区域：D