How to center and crop an image to always appear in square shape with CSS?

by

jsFiddle Demo

div {
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
img {
    position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}
<div>
    <img src="https://i.postimg.cc/TwFrQXrP/plus-2.jpg" />
</div>

A note regarding sizes

As Salman A mentioned in the comments, we need to set the img‘s position coordinates (top, left, bottom, right) to work with percents higher than the image’s actual dimensions. I use 1000% in the above example, but of course you can adjust it according to your needs.

Before and after the fix

* Further explanation: When we set the img‘s left and right (or: top and bottom) coordinates to be -100% (of the containing div), the overall allowed width (or: height) of the img, can be at most 300% of the containing div‘s width (or: height), because it’s the sum of the div‘s width (or: height) and the left and right (or: top and bottom) coordinates.

More Related Contents:

  1. My Website is Mirror-flipped on iPhone Devices
  2. Fill SVG path element with a background-image
  3. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  4. CSS – How to Style a Selected Radio Buttons Label?
  5. Thick underline behind text
  6. Favicon not showing up in Google Chrome [duplicate]
  7. Apply CSS styles to an element depending on its child elements [duplicate]
  8. Space between nowrap inline blocks [duplicate]
  9. Difference between Width:100% and width:100vw?
  10. CSS background image alt attribute
  11. 3 column layout HTML/CSS
  12. How do I remove the blue styling of telephone numbers on iPhone/iOS?
  13. Font Rendering / Line-Height Issue on Mac/PC (outside of element)
  14. HTML5 / CSS3 Circle with Partial Border
  15. Why display grid with 100% in grid-template-columns goes out of body?
  16. How do I justify a horizontal list?
  17. Bootstrap right Column on top on mobile view
  18. How to display a range input slider vertically
  19. how to overwrite css style
  20. tools for obfuscating html and css [closed]
  21. How can I horizontally center an element?
  22. CSS3 transform not working
  23. What is the purpose of .row in Bootstrap? [duplicate]
  24. How do I reduce the opacity of an element’s background using CSS?
  25. CSS to keep element at “fixed” position on screen
  26. How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?
  27. How can I make Bootstrap 4 columns all the same height? [duplicate]
  28. Changing image src depending on screen size
  29. Balanced text wrapping in HTML
  30. How to center-justify the last line of text in CSS?

Leave a Comment