Responzivní galerie obrázků pomocí Bootstrap

HTML

<div class="container">
	<!-- Image list -->
	<div class="row text-center text-lg-left">
		<!-- Single image -->
		<div class="col-md-3 col-sm-6 col-6">
			<a href="img-full.jpg" class="d-block mb-4 h-100">
				<div class="image-square">
					<img class="img-fluid img-thumbnail" src="img-thumb.jpg" />
				</div>
			</a>
		</div>
		<!-- End of Single image -->
	</div>
	<!-- End of Image list -->
</div>

CSS

.image-square { 
	position:relative; 
	overflow:hidden; 
	padding-bottom:100%; 
}

.image-square img { 
	position: absolute; 
	max-height: 100%; 
	max-width: 100%; 
	top: 50%; 
	left: 50%; 
	transform: translateX(-50%) translateY(-50%); 
	object-fit: contain; 
}

Použití ve WordPress

Zobrazení náhledů produktů bez ořezu