Image Distortion

When we cannot control the aspect ratio of the images in the web page, it is best to consider in advance and provide solutions when the image aspect ratio is inconsistent.

In the example below, we have a card component with a photo. It looks good.

Delicious food

A delicious meal

At that time, if the aspect ratio of the image used was inconsistent, the image would be stretched:

Delicious food

A delicious meal

The simplest solution is to use CSS object-fit.

.card__image {
  object-fit: cover;
}

Example

object-fit: cover

Adjust the container size to see the effect

HTML

<div class="wrapper">
  <img id="image" src="/images/defensive-css/ratio.png" />
</div>
<div class="actions">
  <input type="checkbox" id="toggle" />
  <label for="toggle">Enable object-fit</label>
</div>

CSS

.wrapper {
  position: relative;
  width: 300px;
  max-width: 100%;
  display: flex;
  align-items: center;
  resize: horizontal;
  overflow: hidden;
  flex: 1;
  border-right: solid 2px var(--vp-c-border, #c2c2c4);
  padding-right: 3rem;
  padding-left: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  background: var(--vp-c-bg-alt, #f0f0f0);
}
.wrapper::after {
  content: 'Resize me';
  position: absolute;
  right: 0;
  top: 50%;
  writing-mode: tb-rl;
  transform: translateY(-50%);
  font-size: 13px;
  line-height: 1.2;
}

#image {
  width: 100%;
  height: 140px;
}

Javascript

const image = document.querySelector('#image')
document.querySelector('#toggle').addEventListener('change', (e) => {
  image.style.objectFit = e.target.checked ? 'cover' : 'initial'
})