1

我有一张我想要的图片：

  • 覆盖容器的最大空间，同时完全可见并保持纵横比
  • 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;
}

容器的图像覆盖是使用 .css 的containCSS 属性完成的background-size。

问题是：叠加层的尺寸错误（.container而不是.image），因此红点相对于图像不会粘在其位置上。

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

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

一种解决方案是添加一个div具有正确纵横比的包装元素，然后两者都image可以overlay是具有绝对全宽和高度的内部元素，但是，我不知道如何以一种div完全流动的方式做到这一点容器div

其他解决方案，在这个小提琴中演示：http: //jsfiddle.net/K4UR4/3/，正如 MilanSxD 所建议的，使用inline-block元素。它部分工作：

  • 在 Chrome 中，即使初始状态为 Ok，垂直调整大小也会破坏包装器比率
  • 在 Firefox 中，不遵守图像的最大高度
4

1 回答 1

0

在容器中添加：

显示：内联块；

于 2013-10-21T12:02:04.610 回答