使用对象匹配：覆盖；在具有纵横比的容器中并不总能产生预期的结果

Question

我正在尝试在具有特定宽高比的容器内的 <img /> 元素上使用 object-fit 和 object-position。有很多方法可以将宽高比应用于具有 CSS 的元素。填充技巧是最流行的，但我不想在子图像上使用 position: absolute;，因为我需要图像在其位置和大小方面更加智能。我基本上需要用一个不是背景图像的 <img /> 元素来模拟 background-size: cover;。我可以使用 aspect-ratio，但几乎不受支持。

我发现 this really interesting technique 可以将宽高比应用于元素，并且它在大多数情况下都有效。您可以通过调整 SVG 中的 viewBox 值来操纵纵横比。我已经对 <picture /> 应用了几种纵横比，并且大多数工作都是如此。 <svg viewBox="0 0 1 1" /> 按预期裁剪子图像的右侧和左侧。 <svg viewBox="0 0 3 2" /> 显示未裁剪的整个图像。酷

但是，当我使用 <svg viewBox="0 0 3 1" /> 之类的东西时，SVG 的大小正确，但 <picture /> 的大小不正确，并且 <img /> 没有被裁剪顶部和底部符合预期。

知道为什么吗？

.Picture {
  box-shadow: 0 0 0 10px red;
  display: grid;
  overflow: hidden;
  width: 50vw;
}

.Picture > * {
  grid-area: 1 / 1 / 2 / 2;
}

.Img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

<picture class="Picture">
  <svg viewBox="0 0 3 1" />
  <source media="(min-width: 1600px)" srcset="http://res.cloudinary.com/fringe/image/upload/f_auto/samples/people/bicycle.jpg">
  <source media="(min-width: 800px)" srcset="http://res.cloudinary.com/fringe/image/upload/f_auto/test/1950-1300.jpg">
  <img src="http://res.cloudinary.com/fringe/image/upload/f_auto/test/1950-1300.jpg" class="Img">
</picture>

Answer 1

由于所有元素都是流入的，因此最大的元素将定义大小，在您的情况下它不是 SVG。为确保 SVG 是唯一定义尺寸的 SVG，请在图像上使用 height:0;min-height:100%。这将使图像不影响网格的高度，同时强制它具有完整的高度。

.Picture {
  box-shadow: 0 0 0 10px red;
  display: grid;
  overflow: hidden;
  width: 50vw;
}

.Picture>* {
  grid-area: 1 / 1 / 2 / 2;
}

.Img {
  display: block;
  height: 0;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

<picture class="Picture">
  <svg viewBox="0 0 3 1" />
  <source media="(min-width: 1600px)" srcset="http://res.cloudinary.com/fringe/image/upload/f_auto/samples/people/bicycle.jpg">
  <source media="(min-width: 800px)" srcset="http://res.cloudinary.com/fringe/image/upload/f_auto/test/1950-1300.jpg">
  <img src="http://res.cloudinary.com/fringe/image/upload/f_auto/test/1950-1300.jpg" class="Img">
</picture>

使用对象匹配：覆盖；在具有纵横比的容器中并不总能产生预期的结果

Using object-fit: cover; doesn’t always yield the expected result in a container with an aspect ratio

css

svg

css-grid

aspect-ratio