背景有4种尺寸相同的图像的最佳方式是什么？

问题描述：

我正在寻找最简单的方法，让4张图片每张背景占用25％背景有4种尺寸相同的图像的最佳方式是什么？

1-2-3-4或1-2 \ n3-4？或1 \ n2 \ n3 \ n4？其中\ n =新线 – 2014-09-21 00:03:11

像4象限 – czmudzin 2014-09-21 00:06:38

最简单的方法是什么？让他们成为一个形象。 – MikeSmithDev 2014-09-21 00:09:32

答

我这样做有点奇怪，但它总是适合我。

CSS

body, html { 
    margin: 0px; 
    padding: 0px; 
} 
.pA, .pB, .pC, .pD { 
    position: absolute; 
    width: 50vw; 
    height: 50vh; 
} 
.pA { 
    background: red; 
} 
.pB { 
    background: green; 
    margin-left: 50vw; 
} 
.pC { 
    background: blue; 
    margin-top: 50vh; 
} 
.pD { 
    background: yellow; 
    margin-top: 50vh; 
    margin-left: 50vw; 
}

和简单的div

<div class="pA"> 
</div> 
<div class="pB"> 
</div> 
<div class="pC"> 
</div> 
<div class="pD"> 
</div>

它的简单，它的工作原理，很容易玩。

我猜最好方式（op的规范）将使用calc()虽然。

Demo

背景有4种尺寸相同的图像的最佳方式是什么？

相关推荐