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

Tiny city

Tiny city

By stepan
Masturbation causes blindness

Masturbation causes blindness

By equantlondon
A Pen by Datu Arellano

A Pen by Datu Arellano

By datuarellano
horo

horo

By kilchenmann
Flexbox Guild

Flexbox Guild

By jccheng
Push Buttons

Push Buttons

By Samuel Kendrick
jQuery scrollView V0.8 : viewport scroll and screen vertical helper

jQuery scrollView V0.8 : viewport scroll and screen vertical helper

By molokoloco
A Pen by Erik Blankinship

A Pen by Erik Blankinship

By jedierikb
© 2018 - Copyright CodeSeek.co
contact email