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

optyPerson

optyPerson

By Adam Hopkins
A Pen by Ujjawal Anand

A Pen by Ujjawal Anand

By andy1729
Color Scheme

Color Scheme

By jesgs
A Pen by Jens Bay

A Pen by Jens Bay

By Hansi2468
Ideas for a simple booking calendar

Ideas for a simple booking calendar

By katydecorah
Build a tribute page

Build a tribute page

By barreira
media player notes

media player notes

By EduProjectsIL
How We Do It - Primary Page Template

How We Do It - Primary Page Template

By cabplanalp
© 2018 - Copyright CodeSeek.co
contact email