How to Center Crop an Image (<Img>) in Fluid Width Container

How to center crop an image ( img ) in fluid width container

When It Works

You might have a container that holds some content such as two <div>s that are 50% wide each, sitting next to each other. For this example, we can illustrate just one child of the container:

We'll name outer rectangle .container, the inner rectangle .content and the image img. This arrangement is perfectly fine, as long as .content is always wider than img.

When It Breaks

Since we're dealing with percentages and probably working with a responsive design, this may not always be the case. If .content is ever thinner than img, cropping will occur:

The Problem

If the most interesting part of img is in the center, we need to get the browser to crop both edges evenly - leaving the best part of it visible, no matter what width of .content is.

The Solution

Fortunately, a solution is possible. Even better, no extra markup is required.

.content {
    width: 90%; /* or whatever is required */
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; /* hide the cropped portion */
}

img {
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}

How to automatically crop and center an image in div container

add object-fit: cover; to the image to fill the given size while not stretching the image. Also use height: 100%; width: 100%; to make sure that the image only take the given space.

The image will be centered by default.

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* for demonstration only */

div {
  margin-bottom: 20px;
}

div:nth-of-type(1) {
  width: 200px;
  height: 50px;
}

div:nth-of-type(2) {
  width: 200px;
  height: 100px;
}

div:nth-of-type(3) {
  width: 200px;
  height: 200px;
}

<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>

Horizontally center wide images in container, crop left/right if necessary

The following trick will center an image horizontally even if that requires pushing the left side outside the container.

.cycle-slideshow {  position: relative;  /* for testing */  margin: 0 auto;  border: 10px solid #FC0;  width: 200px;  height: 200px;}.cycle-slideshow img {  position: absolute;  top: 0;  /* fill vertically */  width: auto;  height: 100%;  /* center horizontally */  left: -1000px;  right: -1000px;  margin-left: auto;  margin-right: auto;  /* for testing */  z-index: -1;}

<div class="container-fluid main-slide">  <div class="cycle-slideshow">    <img src="http://dummyimage.com/800x200/000/fff">    <img src="http://dummyimage.com/600x200/000/fff" style="display: none;">    <img src="http://dummyimage.com/400x200/000/fff" style="display: none;">    <img src="http://dummyimage.com/200x200/000/fff" style="display: none;">  </div></div><!-- cycle plugin will cycle the images one by one -->

How to crop, resize and center an img with a fixed height using CSS

This technique works quite well:

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

How to automatically crop and center an image

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('http://placehold.it/200x200');"></div>

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

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>

---

Related Topics