Question

我有一张图片，我想：

覆盖容器的最大空间，同时完全可见并保持纵横比
要覆盖相同大小的div元素

这是HTML，非常基本：

<div class="container">
    <div class="image"><!-- Image is the background of this div -->
        <div class="overlay">
            <div class="dot"></div>
        </div>
    </div>
</div>

这是CSS：

html, body {
    height: 100%;
    background-color: #ddd;
}
.container {
    position: absolute;
    width: 80%;
    height: 80%;
    background-color: blue;
}
.image {
    position: relative;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-color: yellow;
    background-position: center;
    background-size: contain;
    background-image: url(http://dummyimage.com/70x40/000/fff.png)
}
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
}
.dot {
    position: absolute;
    top: 20%;
    left: 40%;
    width: 10px;
    height: 10px;
    background-color: red;
}

使用contain的{{1}} CSS属性完成容器的图像覆盖。

问题是：叠加层尺寸错误（background-size而不是.container），因此红点不会相对于图像保持其位置。< / p>

演示：http://jsfiddle.net/GTLMP/

知道如何在没有javascript的情况下实现这一目标吗？

一种解决方案是添加具有正确宽高比的包裹.image元素，然后div和image都可以是具有绝对全宽和高度的内部元素，但是，我不喜欢不知道如何以这个overlay在容器div

中充分流动的方式做到这一点

其他解决方案，在这个小提琴中进行演示：http://jsfiddle.net/K4UR4/3/，由MilanSxD建议，使用div元素。它部分有效：

在Chrome中，即使初始状态为“正常”，也会垂直调整大小，以打破包装比例
在Firefox中，不尊重图像的最大高度

Answer 1

向容器添加：

display：inline-block;

如何使用相同大小的div元素叠加流体图像？

1 个答案: