<style>
* {
	
}
body {
    background-color: #e4f5c4;
  }
h2 {
	font-weight: 400;
}
.showPicture {
	width: 20%;
	float: left;
	text-align: center;
	border: 1px solid gray;
	padding: 5px;
	box-sizing: border-box;
}
img {
	width: 250px;
	height: 250px;
	border: 1px solid black;
	object-fit: none;
}

#imgPos1 { object-position: 0% 0%; }
#imgPos2 { object-position: 50% 0%; }
#imgPos3 { object-position: 90% 0%; }
#imgPos4 { object-position: 0% 50%; }
#imgPos5 { object-position: 50% 50%; }
#imgPos6 { object-position: 80% 50%; }

@media screen and (max-width: 480px) {
body {
	background-color: #ffe600;
	}

.showPicture {
	width: 95%;
	display: block;
	margin: auto;
	text-align: center;
	}
}

</style>