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

anuglar+svg+tweenmax

anuglar+svg+tweenmax

By sgfslong
ITP 104 - 09-26-17 - forms.html

ITP 104 - 09-26-17 - forms.html

By nayeon
Loading Amiation

Loading Amiation

By Arif_Iqbal
Vue &amp; GSAP

Vue & GSAP

By Sixl
nicehashe api

nicehashe api

By casper-man
A Pen by Tanmay

A Pen by Tanmay

By tanmay7270
Jim and Lori

Jim and Lori

By jessegavin
Slide down/up with transform scale

Slide down/up with transform scale

By nanovisor
© 2018 - Copyright CodeSeek.co
contact email