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

Machimina Waves

Machimina Waves

By hexapode
$.Deferred done() vs then()

$.Deferred done() vs then()

By ruudud
Animated SVG Lines

Animated SVG Lines

By DesignyourCode
CMT3-opdracht8

CMT3-opdracht8

By CharltonAbney
Newest Blender Update

Newest Blender Update

By Elle_kennedy
A Pen by Scrabble

A Pen by Scrabble

By Scrabble
ExamplesEdit

ExamplesEdit

By danmaslo
modal REGIONS bootstrap test (responsive)

modal REGIONS bootstrap test (responsive)

By umsteadSSB
© 2018 - Copyright CodeSeek.co
contact email