CSS object-fit 관련

CSS > Article(s)

---

Article(s)

---

CSS object-fit

The `object-fit` CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Exploring object-fit – Mozilla Hacks - the Web developer blog

On web documents, a common problem concerns the display of different sized images (or videos) in the same place. Perhaps you are writing a dynamic gallery app that accepts user ...

object-fit - CSS | MDN

The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

I still want something like aspect-ratio() in CSS though, because setting aspect-ratios on elements right now is a nasty hack. #pavethecowpaths

CSS object-fit

---

img { width: 150px; height: 100px; border: 1px solid #000; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established … Continue reading ”CSS object-fit”