html - 如何在小div中适合大图像

Question

我有一张 1920*1300 的图片我希望在网站运行的任何设备中显示的比率，并且我希望图像覆盖整个 div。
这是我的代码:

.carousel {
  width: 100vw;
  height: 80vh;
  position: relative;
}

.carousel a {
  width: 100%;
  height: 100%;
}

.carousel img {
  width: 100%;
  height: 100%;
  /* Image does not render proper*/
  object-fit: cover;
  /* Image gets streched */
  object-fit: fill;
  /* Does not fill the whole carousel */
  object-fit: contain;
}

<section class="carousel">
  <a href="\calculator">
    <img class="slide" src="https://via.placeholder.com/1930x1300" /></a>
</section>

Answer 1

TL;DR

Make sure you set both aspect-ratios of the container and the image to the same number

它将 从不(*) 成为 100%完美匹配，因为 aspect-ratio .您可以设置任一边以匹配 100%另一个可以是 auto这将是相对于另一个(保持 aspect-ratio )，因此它将与父容器一起缩放而不会失真。
如果将两者都设置为 100%那么一部分( width 或 height )将小于 container .如果你不关心 aspect-ratio你可以拉伸(stretch)它。

(*) 它只会像您预期的那样工作 iff container有相同的 aspect-ratio作为您的 image .
在您的情况下，窗口是 100vw / 80vh这导致 5/4比率( 1.25)。然而图像是: ~ 31/21 ( ~ 1.4769)。
因此，如果您申请 container-ratio到您的图像: 1920 x (1300 * 1.1815)你得到 1920 x 1536 => 1920 / 1536 = 1.25 .现在，如果你这样做:

.carousel a {
  display: block;
}

.carousel img {
  width: 100%;
}

它应该完全适合，同时保持 aspect-ratio .即使图像尺寸更大或更小(例如 480 x 384, 960 x 768, 1920 x 1300 等)。但这是一个特例(见第二个片段)。
如果你所有的图片都在这个 1920 x 1300例如格式，那么你可以调整 height的 container取而代之(可以说是反过来)。

.carousel {
  width: 100vw;
  /* 100 / (1920 / 1300) */
  height: 67.70vh
}

首先，一般示例(容器纵横比:5/4，图像纵横比:~31/21)

body {
  margin: 0;
  padding: 0;
}

.carousel {
  width: 100vw;
  height: 80vh;
  position: relative;
}

.carousel a {
  display: block;
  height: auto;
}

.carousel img {
  width: 100%;
  height: 100%;
}

<section class="carousel">
  <a href="\calculator">
    <img class="slide" src="https://via.placeholder.com/1920x1300" /></a>
</section>

二、具体例子(container-aspect-ratio: 5/4, image-aspect-ratio: 5/4)

body {
  margin: 0;
  padding: 0;
}

.carousel {
  /* same ratio as 5/4 i.e. 100%/80% */
  width: 480px;
  /* ... */
  height: 384px;
  border: 1px dashed black;
  position: relative;
}

.carousel a {
  display: block;
}

.carousel img {
  width: 100%;
}

<section class="carousel">
  <!-- I made the image smaller so that it is better to see in the snippet but you could also use 1920x1300 ofc. -->
  <a href="\calculator"><img class="slide" src="https://via.placeholder.com/960x768" /></a>
</section>