Question

我正在尝试为网站制作一个mosaique。我想这些照片很适合他们各自的div。我尝试了很多配置，但图片似乎总是重叠和/或不适合它们各自div的100％。似乎这些照片并没有遵循我指出的百分比。

body{
	width:100%;
	height: 100%;
}



#firstRow {
	margin:4px;

	display:flex;
	height:40%;
	width: 100%;
	
}




#secondRow {
	margin:4px;

	display:flex;
	height:10%;
	width: 100%;
	
}

#thirdRow {
	margin:4px;

	display:flex;
	height:50%;
	width: 100%;
	
}

.bigImageMosaique {
	margin:4px;
	position: relative;
	
	width: 50%;
}




.mediumImageMosaique {
	margin:4px;
	position: relative;

	width: 60%;
}



.smallImageMosaique {
	margin:4px;
	position: relative;
	
	width: 40%;
}


img{
	display:block;
width : 100%;
height: 100%;

}

h2{
	position: absolute;
	bottom:5%;
	left:0;
	width: 100%;
}

h2 span {
	color: white;
	font: bold 24px/45px;
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0 ,0.7);
	padding: 10px;

}

<!DOCTYPE html>

<html>


<style>
	<?php include ("CSSMosaiqueSeule.css"); ?>
</style>

<body>

<div id="firstRow">

	<div class="bigImageMosaique">
		<img src="images\mosaiqueImage\bolt.jpg" alt=""/>
		<h2><span> Je suis une légende vivante </span></h2>
	</div>

	<div class="bigImageMosaique">
		<img src="images\mosaiqueImage\bolt.jpg" alt=""/>
		<h2><span> Je suis une légende vivante </span></h2>
	</div>
</div>


<div id="secondRow">

	<div class="mediumImageMosaique">
		<img src="images\mosaiqueImage\bolt.jpg" alt=""/>
		<h2><span> Je suis une légende vivante </span></h2>
	</div>

	<div class="smallImageMosaique">
		<img src="images\mosaiqueImage\bolt.jpg" alt=""/>
		<h2><span> Je suis une légende vivante </span></h2>
	</div>
</div>

<div id="thirdRow">
	<div class="smallImageMosaique">
		<img src="images\mosaiqueImage\bolt.jpg" alt=""/>
		<h2><span> Je suis une légende vivante </span></h2>
	</div>

	<div class="mediumImageMosaique">
		<img src="images\mosaiqueImage\bolt.jpg" alt=""/>
		<h2><span> Je suis une légende vivante </span></h2>
	</div>
</div>


</body>




</html>

Answer 1

有一些很好的答案here as well但Jonas的评论是一种在旧浏览器中运行良好的方法。如果您在开始添加额外的类来保存不同的背景图像并且反对DRY时添加多个图像，那就太烦人了。这是代码的样子：

在您的HTML加价中

<div class="your-class-name"></div>

在CSS中

.your-class-name {
background: url(http://ThePathToYourImageHere...) no-repeat center center;
background-size: cover;}

如何让我的马赛克中的照片成为各自div的100％？

1 个答案: