CodePen Embed - Techniques to crop and resize images with CSS

<h1>Techniques to crop and resize images with CSS</h1>

<h2>Image as a background</h2>

<div class="image-grid">

  <a href="https://www.flickr.com/photos/teroauralinna/33704491300" class="image-bg" style="background-image:url(https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg)" target="_blank">
    <img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-bg-img sr-only" src="https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg" alt="Cropped image as a background example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/33704488370" class="image-bg" style="background-image:url(https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg)" target="_blank">
    <img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-bg-img sr-only" src="https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg" alt="Cropped image as a background example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088934825" class="image-bg" style="background-image:url(https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg)" target="_blank">
    <img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-bg-img sr-only" src="https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg" alt="Cropped image as a background example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088930595" class="image-bg" style="background-image:url(https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg)" target="_blank">
    <img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-bg-img sr-only" src="https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg" alt="Cropped image as a background example" />
  </a>

</div>

<h2>The object-fit property</h2>

<div class="image-grid">

  <a href="https://www.flickr.com/photos/teroauralinna/33704491300" class="image-fit" target="_blank">
    <img class="image-fit-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-fit-img" src="https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg" alt="Cropped image using object-fit example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/33704488370" class="image-fit" target="_blank">
    <img class="image-fit-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-fit-img" src="https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg" alt="Cropped image using object-fit example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088934825" class="image-fit" target="_blank">
    <img class="image-fit-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-fit-img" src="https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg" alt="Cropped image using object-fit example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088930595" class="image-fit" target="_blank">
    <img class="image-fit-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-fit-img" src="https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg" alt="Cropped image using object-fit example" />
  </a>

</div>

<h2>Absolute positioned image</h2>

<div class="image-grid">

  <a href="https://www.flickr.com/photos/teroauralinna/33704491300" class="image" target="_blank">
    <img class="image-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-img" src="https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg" alt="Cropped image using absolute positioning example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/33704488370" class="image" target="_blank">
    <img class="image-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-img" src="https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg" alt="Cropped image using absolute positioning example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088934825" class="image" target="_blank">
    <img class="image-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-img" src="https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg" alt="Cropped image using absolute positioning example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088930595" class="image" target="_blank">
    <img class="image-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-img" src="https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg" alt="Cropped image using absolute positioning example" />
  </a>

</div>

<h2>Image inside SVG</h2>

<div class="svg-image-grid">

  <a href="https://www.flickr.com/photos/teroauralinna/33704491300" class="image-svg" target="_blank">
    <svg viewBox="0 0 1 1" role="img">
      <title>Cropped image using SVG example</title>
      <image xlink:href="https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
    </svg>
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/33704488370" class="image-svg" target="_blank">
    <svg viewBox="0 0 1 1" role="img">
      <title>Cropped image using SVG example</title>
      <image xlink:href="https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
    </svg>
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088934825" class="image-svg" target="_blank">
    <svg viewBox="0 0 1 1" role="img">
      <title>Cropped image using SVG example</title>
      <image xlink:href="https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
    </svg>
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088930595" class="image-svg" target="_blank">
    <svg viewBox="0 0 1 1" role="img">
      <title>Cropped image using SVG example</title>
      <image xlink:href="https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
    </svg>
  </a>

</div>

<p style="text-align:center">Read more: <a href="https://auralinna.blog/post/2018/crop-and-resize-images-with-css" target="_blank">Crop and resize images with CSS</a></p>

html, body {
  color: #333;
  font-size: 16px;
  line-height: 20px;
}
body {
  margin: 20px;
}

h1 {
  line-height: 1.2;
  margin-bottom: 35px;
  text-align: center;
}

h2 {
  text-align: center;
}

img {
  height: auto;
  max-width: 100%;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 35px;
  max-width: 920px;
}

.svg-image-grid {
  clear: both;
  margin: 0 auto 35px;
  max-width: 920px;
  overflow: hidden;
  position: relative;
}

/** Screen readers only class from Bootstrap */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

/** Actual code examples */

/** Background */

.image-bg {
  background-position: center center;
  background-size: cover;
  flex: 0 0 auto;
  margin: 5px;
  width: calc(25% - 10px);
}
.image-bg-placeholder {
  height: 100%;
  visibility: hidden;
  width: 100%;
}

/** Object-fit */

.image-fit {
  flex: 0 0 auto;
  margin: 5px;
  position: relative;
  width: calc(25% - 10px);
}
.image-fit-placeholder {
  height: 100%;
  visibility: hidden;
  width: 100%;
}
.image-fit-img {
  bottom: 0;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

/** Absolute positioning */

.image {
  flex: 0 0 auto;
  margin: 5px;
  overflow: hidden;
  position: relative;
  width: calc(25% - 10px);
}
.image-placeholder {
  height: 100%;
  visibility: hidden;
  width: 100%;
}
.image-img {
  left: 50%;
  max-height: 150%;
  max-width: 177%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

/** SVG */

.image-svg {
  float: left;
  margin: 5px;
  padding-bottom: calc(25% - 10px);
  position: relative;
  width: calc(25% - 10px);
  
  svg {
    bottom: 0;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
  }
}

/** Responsive grid */

@media (max-width: 480px) {
  .image,
  .image-fit,
  .image-bg,
  .image-svg {
    width: calc(50% - 10px);
  }
  .image-svg {
    padding-bottom: calc(50% - 10px);
  }
}

View Compiled

This Pen is owned by Tero Auralinna on CodePen.

See more by @teroauralinna on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap-reboot.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.