如何让图片逐渐/平滑响应（先减小宽度，再减小高度）

Question

我有一个图像，我希望在响应模式下能很好地看到，不幸的是，由于它的宽度很大，它的高度在手机上太小了！

有一种方法可以设置平均高度，这样高度就不会降低太多，但这不是一个准确的方法：

object-fit: cover;
min-height: 250px;

所以我想到的想法是设置一个宽度范围。并且先减小宽度，然后再减小高度。

这可能吗？：

每当浏览器缩小并想要减小图像的高度时，它应该首先减小图像的宽度（覆盖 - 缩放）。逐渐/平滑地达到指定范围（左右各10%），然后在保持减小的尺寸的同时减小高度。

我的代码：

.ihero img {
width: 100%;
}

<a class="ihero" href="https://example.com/">
<img src="https://i.sstatic.net/fzY3Uxj6.jpg">
</a>

Answer 1

是的，你可以实现你想要实现的目标，但是你确实需要媒体查询来在不同的视口宽度下实现不同的样式。

您的源图像大小为 2560x600 像素，但我假设您想将其视为 @2x 图像，因此就 CSS 像素而言，我们认为它是 1280x300。每边裁剪 10% 后，图像的尺寸将为 2048x600，或 CSS 像素为 1024x300。

1. 总体策略是将图像包装在容器中，通过各种方式约束容器，设置图像填充容器并设置

   object-fit: cover

   以便自动裁剪。
2. 当宽度低于 1024 像素时，我们将容器的

   aspect-ratio

   限制为 1024/300。图像宽度的 20% 被裁剪，每边各 10%。
3. 宽度在 1024 到 1280 像素之间时，我们将容器的

   height

   限制为 300，并取消对

   aspect-ratio

   的限制。裁剪从 1024 像素时的 20% 平滑变化到 1280 像素时的 0%。
4. 宽度超过 1280 像素时，

   height

   和

   aspect-ratio

   都可以是

   auto

   （或

   initial

   ）。图片没有被裁剪。

演示片段。运行后，请确保使用完整页面链接来测试响应行为。

body {
  margin: 0;
}

a.ihero {
  aspect-ratio: 1024/300;
  border: 2px solid red;
  display: block;
}

@media (min-width: 1024px) {
  a.ihero {
    aspect-ratio: initial;
    height: 300px;
  }
}

@media (min-width: 1280px) {
  a.ihero {
    height: auto;
  }
}

a.ihero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

<a class="ihero" href="https://example.com/">
  <img src="https://i.sstatic.net/fzY3Uxj6.jpg">
</a>

运行此代码片段后，请确保使用完整页面链接来测试响应行为。

Answer 2

width: calc(100vw - 10%);
height: auto;

您还可以使用

transform: scaleX(0.9)

或

scale(0.9)

作为临时措施。或者如果在最坏的情况下没有任何效果，请使用 JS。