如何实现单侧固定的background image？窗口缩小时仅单侧收缩且右侧可见

Got it, let's tackle this exact scenario you're dealing with—keeping the right edge of your background image locked in place so it never gets cropped when the browser window shrinks. This is a common layout need, and there are a couple of straightforward CSS solutions to make it happen:

Basic Approach: Anchor Right Edge with Background Position & Size #

This method ensures the right side of your image stays aligned with the container's right edge, while the left side gets cropped as the window narrows. Here's the CSS:

/* Target your container (could be body, a div, etc.) */
.right-fixed-bg {
  background-image: url('your-image-file.jpg');
  background-position: right center; /* Align image's right edge to container's right, vertical center */
  background-repeat: no-repeat;
  background-size: auto 100%; /* Make image height match container, width scales proportionally */
  min-height: 100vh; /* Ensure container covers full viewport height (adjust as needed) */
}

How it works: #

• background-position: right center is the key here—it anchors the image's right edge to the container's right side, so no matter how small the window gets, that edge stays visible.
• background-size: auto 100% ensures the image's height always fills the container, while the width adjusts naturally. When the window is narrower than the image, only the left portion gets clipped.

For Proportional Coverage: Use background-size: cover #

If you want the image to maintain its aspect ratio and cover as much of the container as possible (while still keeping the right edge fixed), use this variation:

.right-fixed-bg {
  background-image: url('your-image-file.jpg');
  background-position: 100% center; /* Same as "right center"—100% = full horizontal alignment to right */
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

How it works: #

• background-size: cover scales the image to cover the entire container without distorting it.
• By setting background-position: 100% center, we tell the browser to anchor the image's right edge to the container's right. As the window shrinks, the image will crop from the left to maintain coverage, leaving the right side intact.

Quick Notes for Edge Cases #

• If your container has padding and you want the image to align with the container's border (not the padding edge), add background-origin: border-box; to the CSS.
• If using <body> as your container, make sure to reset default margins/paddings first:

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  

Pick the method that best fits your image's dimensions and layout goals—both will reliably keep that right edge visible no matter how much the user shrinks their browser window.

内容的提问来源于stack exchange，提问作者Omar Elkaram