Question

最简单的图库布局之一是带有居中图像的正方形网格，例如下面的Adobe Lightroom屏幕截图。

有许多类似的问题(1) (2) (3)，但是所有这些都涉及正方形图像和正方形网格。我的是更笼统的，因为它涉及矩形图像和正方形网格。

我花了很长时间尝试使用css flexbox和inline-box精确地复制下面的屏幕截图，但始终无法正确地使居中：

flex：jsfiddle.net/rmodrak/4sxzkonr /

内联块：jsfiddle.net/rmodrak/wmunqzL6 /

很难相信CSS本身并不支持这种布局。我想念什么吗？

Answer 1

尝试一下：

编辑：添加了响应式布局。

<!DOCTYPE html>
<html>
<head>
<style>
	/*SO relevant*/
	body{
		background:#121212;
		color:white;
	}
	
	/*Container styling*/
	#container{
		/*Important*/
		width:25%;
		min-width:220px; /*200px+subcontainer margin x 2+subcontainer padding x 2*/
		min-height:220px; /*Same here*/
		display:inline-block;
		border:1px solid red; /*If you want to add a border, use box-sizing, see below*/
		box-sizing:border-box; /*Hello im box-sizing man!*/
		padding:0;
		margin:0;
		float: left;
	}
	
	/*Sub-container styling*/
	#subcontainer{
		/*Important*/
		width:200px;
		height:200px;
		position: relative;
		left: 50%;
		-ms-transform: translateX(-52.5%);
		transform: translateX(-52.5%);
		
		/*SO relevant*/
		background:#222222;
		padding:5px;
		margin:5px;
	}
	#subcontainer img{
		/*important*/
		display:block;
		max-height:100%;
		max-width:100%;
		margin:0 auto;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
	/*Make it responsive on smaller devices*/
		@media only screen and (max-width: 910px) {#container{width:33.3%;}}
		@media only screen and (max-width: 690px) {#container{width:50%;}}
		@media only screen and (max-width: 470px) {#container{width:100%;}}
</style>
</head>
<body>
	<h2>Nice photos, nice boxes.</h2>
	<p>Now with 100% more responsiveness!</p>

	<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/3NgXgXkD/0001.jpg"></div></div>
	<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/h4x1WB2P/0002.jpg"></div></div>
	<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/FRkgK5mp/0003.jpg"></div></div>
	<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/kGrN61gm/0004.jpg"></div></div>
	<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/VvcMLJKs/0005.jpg"></div></div>
	<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/FzgSfh6y/0006.jpg"></div></div>
	<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/MTBVS7br/0007.jpg"></div></div>
	<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/WpMgY74d/0008.jpg"></div></div>
</body>
</html>

带有CSS的响应式Lightroom样式网格？

1 个答案: