如何用CSS实现三个宽满屏、高占页面33%且不失真的背景图？是否需预处理图片？

嘿，很高兴你在FreeCodeCamp折腾作品集项目！这个需求其实很典型，我来一步步帮你解决，顺便解答你的疑问~

核心实现思路（CSS代码示例） #

首先，我们可以用三个<section>标签来做三个板块，然后通过CSS控制每个板块的尺寸和背景图属性，完全不需要复杂的图片预处理（当然优化下效果会更好）。

HTML结构 #

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 样式可以写在这里，也可以单独放在styles.css文件中 */
  </style>
</head>
<body>
  <section class="portfolio-block block-1"></section>
  <section class="portfolio-block block-2"></section>
  <section class="portfolio-block block-3"></section>
</body>
</html>

CSS样式 #

/* 先重置浏览器默认边距，避免板块间出现间隙 */
body {
  margin: 0;
  padding: 0;
}

/* 通用板块样式 */
.portfolio-block {
  width: 100vw; /* 强制铺满整个视口宽度 */
  height: 33vh; /* 占视口高度的33%，三个加起来刚好接近满屏 */
  background-repeat: no-repeat;
  background-position: center center; /* 让图片居中显示，保护核心内容不被裁剪 */
  background-size: cover; /* 关键！保持图片原始比例，覆盖整个板块，不会拉伸失真 */
}

/* 给每个板块设置不同背景图 */
.block-1 {
  background-image: url('你的第一张图片路径.jpg');
}

.block-2 {
  background-image: url('你的第二张图片路径.jpg');
}

.block-3 {
  background-image: url('你的第三张图片路径.jpg');
}

关于“失真”的疑问解答 #

你担心的失真其实是拉伸变形，而上面用的background-size: cover已经完美解决了这个问题：

• 它会自动按图片的原始比例缩放，直到完全覆盖整个板块容器
• 超出板块的部分会被裁剪，但图片本身不会被拉伸，所以绝对不会出现变形失真的情况

那要不要预先编辑图片尺寸？

• 不是必须的！但如果你的图片原始比例和板块比例（宽100vw，高33vh，大概是3:1的宽高比）差得特别大，裁剪可能会切掉图片里的重要内容（比如人物的脸、作品的核心部分）。这时候提前把图片裁剪/调整到接近3:1的比例，能让显示效果更理想。
• 如果图片比例刚好接近3:1，那直接用cover就完美，完全不用预处理。

额外小技巧 #

如果你不想裁剪图片，想完整显示整张图，可以把background-size: cover换成background-size: contain，但这样板块的上下或左右可能会出现空白（因为要保持图片比例），适合图片内容不能裁剪的场景。

内容的提问来源于stack exchange，提问作者C Wood