如何防止图片被压缩？

Question

我正在编写一个简单的英雄区块，其中包含每2秒钟自动更换背景图片。然而，由于这些图片具有不同的尺寸，在较大的屏幕上它们看起来非常挤压。我该如何解决这个问题并使其响应式地适应每个屏幕大小？

$hero: 100vh;
$white: #fff;
$black: #000;
$blue: #6db8d7;
$grey: #808080;

* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
}
.hero-body {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero-text {
  position: absolute;
  bottom: 40%;
  left: 20px;
}
img {
  width: 100%;
  height: $hero;
}
.title,
h4 {
  color: $white;
  font-size: 1em;
  text-shadow: 1px 1px 2px $black;
  text-align: center;
}
button {
  background-color: $blue;
  padding: 10px;
  text-transform: uppercase;
  font-weight: 500;
  color: $white;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: 0 3px 6px 0 $grey;
  cursor: pointer;
  &:hover,
  &:focus {
    transform: scale(1.05);
    transition: all 0.5s ease-in-out;
  }
}

<section class="hero">
  <div class="hero-body">
    <img class="bg-img" src="https://source.unsplash.com/alEZLDPPRBU">
    <img class="bg-img" src="https://source.unsplash.com/Ov0u44CyGdM">
    <img class="bg-img" src="https://source.unsplash.com/8beTH4VkhLI">
    <div class="hero-text">
      <h1 class="title">
        Delight, Fresh, Fruity
      </h1>
      <h4>Come join us for our organic cones!</h4>
      <button>View flavors</button>
    </div>
  </div>
</section>

- ChuChu

---

如果只针对现代浏览器，您可以使用以下代码覆盖容器：img { width: 100%; height: 100%; object-fit: cover;（这将类似于 background-size: cover;），但您可能希望使文本静态，并且将图像设置为 position: absolute;。 - chriskirknielsen

谢谢！这个完美地运作了。@chriskirknielsen - ChuChu

Answer 1

将object-fit: cover设置为<img>：

:root {
  --hero: 100vh;
  --white: #fff;
  --black: #000;
  --blue: #6db8d7;
  --grey: #808080;
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.hero-body {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hero-text {
  position: absolute;
  bottom: 40%;
  left: 20px;
}

img {
  width: 100%;
  height: var(--hero);
  object-fit: cover;
}

.title,
h4 {
  color: var(--white);
  font-size: 1em;
  text-shadow: 1px 1px 2px var(--black);
  text-align: center;
}

button {
  background-color: var(--blue);
  padding: 10px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--white);
  text-align: center;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: 0 3px 6px 0 var(--grey);
  cursor: pointer;
}

button:hover,
button:focus {
  transform: scale(1.05);
  transition: all 0.5s ease-in-out;
}

<section class="hero">
  <div class="hero-body">
    <img class="bg-img" src="https://source.unsplash.com/alEZLDPPRBU">
    <img class="bg-img" src="https://source.unsplash.com/Ov0u44CyGdM">
    <img class="bg-img" src="https://source.unsplash.com/8beTH4VkhLI">
    <div class="hero-text">
      <h1 class="title">
        Delight, Fresh, Fruity
      </h1>
      <h4>Come join us for our organic cones!</h4>
      <button>View flavors</button>
    </div>
  </div>
</section>

- Kosh

---

哇，它像魔法般运作。我以前从未听说过这个。谢谢！ - ChuChu

@ChuChu，很高兴能帮忙。 - Kosh

Answer 2

我建议在宽度为100％时将高度设置为自动，以保持图像比例。您可以添加用于移动设备的媒体查询，将宽度设置为例如50％（取决于设备大小-由您决定），并将高度设置为自动。

您还可以使用新的picture标签来适应各种屏幕尺寸。

示例图片标签用法：

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

希望这可以帮到您。

- Rachel Gallen

---

使用不同大小的图片似乎是最好的解决方案。 - Kosh

是的，picture标签可以实现这一点。同时，优化图片也是非常重要的。 （虽然不是问题的一部分，但值得注意） - Rachel Gallen