Question

<div class="outer">
    <div class="inner">
        <div class="main">
            <img src="http://placehold.it/180x180">
        </div>
    </div>
</div>

.outer {
    /* Outer Container With Padding */
    background: red;
    padding: 60px;
    max-width: 400px;
}

.inner {
    /* Bottom padding for fluid div with 2:1 ratio */
    padding-bottom: 50%;
    position: relative;
    width: 100%;
}

.main {
    /* container for the image */
    background: green;
    position: absolute;
    height: 100%;
    width: 100%;
}

.main img {
    height: 100%;
    width: 100%;
}

我不能为我的生活弄清楚为什么图像会超出其容器div。除了适用于iPad的移动游猎和Chrome之外，它的所有功能都很好。运行最新版本的iOS。

在iPad上打开以查看：

http://jsfiddle.net/svja8rgv/3/

Answer 1

您想要将图片本身的位置设置为position: absolute。

<div class="outer">
    <div class="inner">
        <div class="main">
            <img src="http://placehold.it/180x180">
        </div>
    </div>
</div>

.outer {
    /* Outer Container With Padding */
    background: red;
    padding: 60px;
    max-width: 400px;
}

.inner {
    /* Bottom padding for fluid div with 2:1 ratio */
    padding-bottom: 50%;
    position: relative;
    width: 100%;
}

.main {
    /* container for the image */
    background: green;
    position: absolute;
    height: 100%;
    width: 100%;
}

.main img {
    position: absolute;
    height: 100%;
    width: 100%;
}

在iPad移动Safari上扩展图像的图像

1 个答案: