Crop and center image

In this example below you will see how to do a Crop and center image with some HTML / CSS and Javascript

Crop and center image to square or circle with css. Without using background-image, no JavaScript.

Thumbnail
This awesome code was written by 1cco, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1cco ©

Technologies

  • HTML
  • CSS
<!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;
}

Comments

More from 1cco

A Pen by 1cco

A Pen by 1cco

By 1cco
Quill Test

Quill Test

By 1cco
D3 Test

D3 Test

By 1cco
D3.js PIE

D3.js PIE

By 1cco

You Might Also Like

My first pen

My first pen

By uuuulala
A Pen by CJ Williams

A Pen by CJ Williams

By silencekillsdesign
A Pen by Anton Koning

A Pen by Anton Koning

By antonkoning
ice-watch/Apogee email holiday 2016

ice-watch/Apogee email holiday 2016

By andrewck
Icon animation

Icon animation

By gooseofmusic
Fiddling around (with click to expand)

Fiddling around (with click to expand)

By hyunjo_on
TAIMED

TAIMED

By kristinaliisi
Eloquent Javascript Chapter Two Exercise 1.0

Eloquent Javascript Chapter Two Exercise 1.0

By udus97
© 2018 - Copyright CodeSeek.co
contact email