190

Given any arbitrary image, I want to crop a square from the center of the image and display it within a given square.

This question is similar to this: CSS Display an Image Resized and Cropped, but I don't know the size of the image so I can't use set margins.

2
  • 1
    Must the element be an image tag, or can it be a div with a background-image property?
    – Russ Ferri
    Jul 19, 2012 at 0:38
  • as long as I can set the image through my templating system, it doesn't matter. kind of ugly, but I guess inline styles will work. Jul 19, 2012 at 0:40

9 Answers 9

372

One solution is to use a background image centered within an element sized to the cropped dimensions.


Basic example

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}
<div class="center-cropped" 
     style="background-image: url('https://via.placeholder.com/200');">
</div>


Example with img tag

This version retains the img tag so that we do not lose the ability to drag or right-click to save the image. Credit to Parker Bennett for the opacity trick.

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Set the image to fill its parent and make transparent */
.center-cropped img {
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}
<div class="center-cropped" 
     style="background-image: url('https://via.placeholder.com/200');">
  <img src="https://via.placeholder.com/200" />
</div>


object-fit/-position

See supported browsers.

The CSS3 Images specification defines the object-fit and object-position properties which together allow for greater control over the scale and position of the image content of an img element. With these, it will be possible to achieve the desired effect:

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}
<img class="center-cropped" src="https://via.placeholder.com/200" />

10
  • 54
    You can use background-size: cover; to get the image to shrink or fill the div appropriately while maintaining the original aspect ratio.
    – Nick
    Apr 30, 2013 at 16:48
  • 7
    When using background-image you should add background-size:cover to properly size the cropped image: See jsfiddle.net/bw6ct Dec 18, 2013 at 2:29
  • 2
    I've been told that nowdays Google knows about transparent and hidden images, so img's alt ant title attributes will be lost for your SEO. Apr 10, 2014 at 16:43
  • 8
    in webkit you can also use object-fit: cover; directly on the img tag which feels a bit more semantic.
    – Ben
    Nov 14, 2014 at 2:20
  • 2
    I used object-fit: cover to get my desired effect of not losing aspect ratio, covering the square, and cropping if needed Mar 25, 2016 at 9:50
90

I was looking for a pure CSS solution using img tags (not the background image way).

I found this brilliant way to achieve the goal on crop thumbnails with css:

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

It is similar to @Nathan Redblur's answer but it allows for portrait images, too.

Works like a charm for me. The only thing you need to know about the image is whether it is portrait or landscape in order to set the .portrait class so I had to use a bit of Javascript for this part.

6
  • 3
    Just be aware that CSS transforms are only available in IE 9 and above.
    – Simon East
    Jun 22, 2015 at 22:50
  • 6
    This should be the answer.
    – Wes Modes
    Jan 23, 2016 at 2:02
  • 1
    OP said "arbitrary image" so wouldn't know up-front if the image was taller than it was wide.
    – opyate
    Oct 25, 2016 at 20:48
  • 12
    If you put min-height:100%;min-width:100%; instead of height:100%;width:auto; you don't need img.portrait class.
    – user570605
    Oct 31, 2016 at 20:51
  • 1
    best solution combined with @user570605 suggestion
    – albanx
    Feb 7, 2017 at 15:50
68

Try this: Set your image crop dimensions and use this line in your CSS:

object-fit: cover;
7
  • 3
    not very well supported: caniuse.com/#feat=object-fit EDIT: actually, as usual, just MS browsers fail at this... it does represent quite a chunk of usage though :/
    – Brian H.
    Sep 13, 2016 at 11:48
  • 1
    This does exactly what I need :)
    – hcarreras
    Feb 16, 2017 at 10:45
  • 1
    The only widely used browsers that don't support this are Internet Explorer 11 and Edge. Depending on your audience, support right now is probably around 85-90%, which might make this viable for some scenarios.
    – Husky
    May 29, 2017 at 15:01
  • 1
    ther's a good tutorial about that: medium.com/@chrisnager/… Apr 3, 2019 at 13:46
  • 1
    works great in 2021.
    – kennydust
    Oct 25, 2021 at 5:03
24

Example with img tag but without background-image

This solution retains the img tag so that we do not lose the ability to drag or right-click to save the image but without background-image just center and crop with css.

Maintain the aspect ratio fine except in very hight images. (check the link)

(view in action)

Markup

<div class="center-cropped">
    <img src="http://placehold.it/200x150" alt="" />
</div>

CSS

div.center-cropped {
  width: 100px;
  height: 100px;
  overflow:hidden;
}
div.center-cropped img {
  height: 100%;
  min-width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}
3
  • Try this one... if image is smaller than the container it will center, otherwise it will crop jsfiddle.net/3ts4rm24/1
    – KnF
    Oct 29, 2015 at 15:43
  • Why do you use left: 50% with transform: translateX(-50%)? Mar 23, 2021 at 7:23
  • left is a position related to the container translate is related to the element if your container is 100px, and your picture is 20px, left will put the picture between the position 50px-70px. To fix that we rest the size of the picture with translateX(-50%) and then your picture will be between 40px-60px. Ej: if your container is 100px, left: 50% of this container rightMiddle = container/2 - element/2 Mar 24, 2021 at 13:16
9

I created an angularjs directive using @Russ's and @Alex's answers

Could be interesting in 2014 and beyond :P

html

<div ng-app="croppy">
  <cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>

js

angular.module('croppy', [])
  .directive('croppedImage', function () {
      return {
          restrict: "E",
          replace: true,
          template: "<div class='center-cropped'></div>",
          link: function(scope, element, attrs) {
              var width = attrs.width;
              var height = attrs.height;
              element.css('width', width + "px");
              element.css('height', height + "px");
              element.css('backgroundPosition', 'center center');
              element.css('backgroundRepeat', 'no-repeat');
              element.css('backgroundImage', "url('" + attrs.src + "')");
          }
      }
  });

fiddle link

3
  • 4
    Hiya downvoters. Please leave a comment so I can update my answer if there is a mistake. I don't like giving false info. Cheers. Oct 28, 2016 at 15:19
  • Not a downvoter, but this is not an Angular question and your answer is irrelevant. @pferdefleisch
    – mawburn
    Jan 30, 2017 at 14:52
  • 1
    @mburn that makes sense. It has been 3 years and this probably looks a little out of place or obnoxious now. I'll leave it up though because the upvotes on my comment tell me at least a couple people may find it useful (or they just don't like downvotes without comments). Jan 30, 2017 at 18:46
2

Try this:

#yourElementId
{
    background: url(yourImageLocation.jpg) no-repeat center center;
    width: 100px;
    height: 100px;
}

Keep in mind that width and height will only work if your DOM element has layout (a block displayed element, like a div or an img). If it is not (a span, for example), add display: block; to the CSS rules. If you do not have access to the CSS files, drop the styles inline in the element.

1
  • in most case, this CSS is used repeatedly with different images. therefore, it is inevitable to set the background image inline.
    – Raptor
    Jan 15, 2013 at 2:33
0

There is another way you can crop image centered:

.thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;}
.thumbnail img{
    position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px;
    width: auto !important; height: 100% !important; margin: auto;
}
.thumbnail img.vertical{width: 100% !important; height: auto !important;}

The only thing you will need is to add class "vertical" to vertical images, you can do it with this code:

jQuery(function($) {
    $('img').one('load', function () {
        var $img = $(this);
        var tempImage1 = new Image();
        tempImage1.src = $img.attr('src');
        tempImage1.onload = function() {
            var ratio = tempImage1.width / tempImage1.height;
            if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical');
        }
    }).each(function () {
        if (this.complete) $(this).load();
    });
});

Note: "!important" is used to override possible width, height attributes on img tag.

0

for something like instagram explore or grid use this on img tag

aspect-ratio: 1 / 1; //or whatever
object-fit: cover;

note that parent has to have display of grid

1
0

Best of two worlds, some resize and then some croop, by double flexbox around image. Suitable to use for a full screen image (I use it for an image carousel) The width: 100vw and height: 100vh for container is the magic css.

HTML:

<div class="container">
   <div class="slide">
   <img src="https://someimageurl.jpg" 
   alt="image" class="image">
   </div>
</div>

CSS:

  .container {
  display: flex;
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  justify-items: center;
  justify-content: center;
  }
 
 .slide {
 display: flex;
 width: 100%;
 height: 100%;
 max-width: 1600px;
 max-height: 1000px;
 justify-items: center;
 justify-content: center;
 margin: auto;
 padding: 0;
 overflow: hidden;
 }
 
 .image {
 display: block;
 min-width: 100%;
 min-height: 100%;
 object-fit: cover; /* Cover the image */
 object-position: center;
 margin: auto;
 padding: 0;
 }

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.