Question

我遇到问题，我试图在div的角落叠加图像。代码设置如下：

HTML：

<html>
    <body>
        <div class="container">
            <img src="testImg.jpg" width="960" height="649">
        </div>
    <body>
</html>

CSS：

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
img {
    max-width:100%;
    height:auto;
}
.container {
    width:100%;
    height:auto;
    overflow:hidden;
    position:relative;
    display:block;
}
.container:before {
    content:url(../topLeftCorner.png);
    height:auto;
    position:absolute;
    top:0;
    left:0;
    width:7.3%;
}
.container:after {
    content:url(../bottomRightCorner.png);
    height:auto;
    position:absolute;
    bottom:0;
    right:0;
    width:7.3%;
}

正如您可能猜到的那样，我正在努力使这种反应灵敏。角落与页面的背景颜色相匹配（在本例中为白色）。它们是png并且有一半对角透明，所以使左上角和右下角看起来像是斜面（而不是使用边界半径等）。

问题是，右下角：在元素之后实际上与父级进行缩放，包括图像......并且它保持父级宽度的7.3％。另一方面：在元素之前...元素缩放..但里面的图像不是。

我无法想象我的生活......根本没有任何意义。为什么a：在图像缩放之后（因为img标签的最大宽度：100％）...但不是：在元素之前的图像???

这已经在Chrome（最新稳定版）和FireFox中进行了测试。尚未在其他浏览器中尝试过。

为什么百分比宽度适用于：after伪元素但不是on：之前？

0 个答案: