Question

我的解决方案适用于Chrome，IE和Safari，但不适用于Firefox。

请注意，对于我来说，图像采用浮动大小，保持其纵横比，始终是一个完美的正方形。（只是给图像一个边框不会被砍掉）

square-div由.image- *类完成。它们一起工作，如我在此处找到的示例所示：http://www.mademyday.de/css-height-equals-width-with-pure-css.html

如果我在Firefox中打开此解决方案并使窗口足够窄，则图像会变宽。照片中的女人不高兴; - ）

我希望方形div中的图像调整大小，以便在Firefox中保留其宽高比，就像在其他浏览器中一样。我错过了什么？ Firefox的实现有何不同？任何帮助将不胜感激。

这是我的代码：

<!DOCTYPE html>
<html>

<body>

<style>
    .image-container{
        position:relative;
        width: 60%;                 /*size relative parent element*/

        border: solid black 1px;
        margin: 5px;
    }
    .image-container:before{
        content: "";
        display: block;
        padding-top: 100%;   /*aspect ratio, try: 50%, 200%, 75%, 56.25%*/
    }
    .image-container-content{
        position: absolute;
        top:0;
        left:0;
        bottom: 0;
        right: 0;
    }

    .image{
        max-width: 100%;
        max-height: 100%;
        flex-shrink: 0;     /*For IE so img doesn't get outside of frame*/
        width: auto;
    }

    .center-center{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .outer {
        width: 50%;
    }
</style>

<body>

<p>Image in square frame:</p>
<div class="outer">
    <div class="image-container">
        <div class="image-container-content center-center">
            <img src="http://lorempixel.com/200/400/people/9/sample%20picture/"
                 class="image">
        </div>
    </div>
</div>

<p>Image not in frame (for visual comparison):</p>
<div class="outer">
    <div class="">
        <img src="http://lorempixel.com/200/400/people/9/sample%20picture/"
             class="image">
    </div>
</div>

</body>
</html>

在Firefox中保留具有相同高度和宽度的div中图像的宽高比

0 个答案: