<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Crop and center image</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Crop and center images</h1>
<p>without using "background-image"</p>
<h2>Large</h2>
<div class="center-cropped">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="center-cropped round">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="center-cropped circle">
<img src="http://placehold.it/200x150" alt="" />
</div>
<h2>Small</h2>
<div class="center-cropped">
<img src="http://placehold.it/64x48" alt="" />
</div>
<div class="center-cropped round">
<img src="http://placehold.it/64x48" alt="" />
</div>
<div class="center-cropped circle">
<img src="http://placehold.it/64x48" alt="" />
</div>
<h2>Wide</h2>
<div class="center-cropped">
<img src="http://placehold.it/200x100" alt="" />
</div>
<div class="center-cropped round">
<img src="http://placehold.it/200x100" alt="" />
</div>
<div class="center-cropped circle">
<img src="http://placehold.it/200x100" alt="" />
</div>
<h2>High</h2>
<div class="center-cropped">
<img src="http://placehold.it/100x200" alt="" />
</div>
<div class="center-cropped round">
<img src="http://placehold.it/100x200" alt="" />
</div>
<div class="center-cropped circle">
<img src="http://placehold.it/100x200" alt="" />
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/1cco/crop-and-center-image-VYXPNB */
@import url("https://fonts.googleapis.com/css?family=Jaldi");
body {
font-family: 'Jaldi',serif;
}
.container {
float: none;
width: 75%;
margin: auto;
}
.center-cropped {
width: 100px;
height: 100px;
overflow: hidden;
}
.center-cropped img {
height: 100%;
min-width: 100%;
left: 50%;
position: relative;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.center-cropped.round {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.center-cropped.circle {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
div {
float: left;
margin: 0 10px;
}
h2 {
padding: 2em 0 1em;
margin: 0;
clear: both;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Normalize
jQuery
v2.1.3
