Question

我正在尝试使用 index.html和style.css文件创建一个响应式网站。

我在类照片下有 2张图像（请检查html中的div class =“ photo”代码）。

看看我的两张图片

（请注意像素差异和不同的文本图像是相同的）

当我在Google chrome中运行程序时名为 photo-big.jpg 的图像无法正确放入容器中（div class =“ section header”）为什么？

查看应放入的容器：

看到图像不适合放入容器内：

当我将浏览器大小更改为小于960像素时，应加载名为photo-small.jpg的图片，但不加载，但问题是 photo-big会自动调整大小，我不知道为什么会这样吗？。

查看图像在容器中调整自身大小

如果可能，请详细解释给我。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page {
  display: flex;
  flex-wrap: wrap;
}

.section {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  background-color: black;
  height: 80px;
}

.header {
  background-color: #b2d6ff;
}

.content {
  background-color: #eaedf0;
  height: 600px;
}

.sign-up {
  background-color: #d6e9fe;
}

.feature-1 {
  background-color: #f5cf8e;
}

.feature-2 {
  background-color: #f09a9d;
}

.illustration img {
  display: block;
  width: 100%;
}

.feature-3 {
  background-color: #c8c6fa;
}

.header {
  height: auto;
  justify-content: inherit;
  align-items: inherit;
}

.photo img {
  width: 100%;
  display: block;
}

@media only screen and (max-width: 400px) {
  body {
    background-color: #f09a90;
  }
}

@media only screen and (min-width: 401px) and (max-width: 960px) {
  body {
    background-color: #f5cf8e;
  }
  .sign-up,
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 50%;
  }
}

@media only screen and (min-width: 961px) {
  body {
    background-color: #b2d6ff;
  }
  .page {
    width: 960px;
    margin: 0 auto;
  }
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 33.3%;
  }
  .header {
    height: 400px;
  }
  .sign-up {
    height: 200px;
    order: 1;
  }
  .content {
    order: 2;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Responsive Desing</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="page">
    <div class="section menu"></div>

    <div class="section header">
      <div class="photo">
        <img src="images/photo-small.jpg" srcset="images/photo-small.jpg 1000w, images/photo-big.jpg 2000w" sizes="(min-width:960 px) 960px,100vw" />
      </div>
    </div>

    <div class="section content">
      <div class="illustration">
        <img src="images/illustration-small.png" srcset="
                  images/illustration-small.png 1x,
                  images/illustration-big.png   2x
                " style="max-width: 500px" />
      </div>
    </div>
    <div class="section sign-up">
      <img src="images/sign-up.svg" />
    </div>
    <div class="section feature-1">
      <img src="images/feature.svg" />
    </div>
    <div class="section feature-2">
      <img src="images/feature.svg" />
    </div>
    <div class="section feature-3">
      <img src="images/feature.svg" />
    </div>
  </div>
</body>

</html>

Answer 1

来自object-fit on MDN：

cover 替换内容的大小可在填充元素的整个内容框时保持其纵横比。如果对象的长宽比与框的长宽比不匹配，则对象将被裁剪以适合对象。

您需要的新样式是

.header img {
  object-fit: cover;
}

图像无法正确放入容器中，并且图像切换无响应（响应）

1 个答案: