如何设置全屏溢出背景图，使其在大屏保持正确比例且不扭曲

Got it, let's sort out that background image issue for you. The problem with your current CSS is that background-size: 100% forces the image to stretch to fit the container's width without respecting its original 1366×800 aspect ratio—this is why you're seeing distortion when the screen size changes. Here's a tailored solution that keeps the image proportional, scales smoothly on larger screens, and works with your existing .container setup:

Updated CSS Code #

.container {
  max-width: 1200px;
  margin: 0 auto;
  /* Keep your original container styles */
}

/* Core fixes for the background section */
.main_prize_section {
  text-align: center;
  background: url("../images/prize_background.png");
  background-repeat: no-repeat;
  background-size: cover; /* Scales image to cover the container, maintains ratio */
  background-position: center center; /* Keeps image centered at all sizes */
  width: 100%;
  /* Maintain exact aspect ratio of 1366:800 using padding-top */
  padding-top: calc(800 / 1366 * 100%);
  position: relative; /* Lets us absolutely position the inner container */
}

/* Position inner container to fill the background section */
.main_prize_section .container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2%; /* Adds padding without breaking the aspect ratio */
}

/* Adjust flex layout to fill the section */
.flex_row {
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  height: 100%; /* Makes flex container fill the entire section height */
  align-items: center; /* Optional: Vertically centers your content */
}

.col_1_2 {
  width: 50%;
}

/* Fix product image sizing */
.main_prize_product img {
  width: 100%; /* Makes product image fill its column */
  margin: 0 auto;
}

/* Keep your existing text styles */
.main_prize_section h1 {
  color: pink;
  font-size: 4rem;
  font-weight: 700;
}

.main_prize_section h2 {
  color: pink;
  font-size: 2.5rem;
  font-weight: 700;
}

.main_prize_section .col_1_2 div:nth-child(2) {
  padding: 2%;
}

.main_prize_section p:nth-child(2) {
  padding: 2%;
}

.main_prize_section p span:nth-child(1) {
  color: gold;
}

.main_prize_section p span:nth-child(2) {
  color: pink;
}

.main_prize_section p span:nth-child(3) {
  color: red;
}

.main_prize_section p span:nth-child(4) {
  color: blue;
}

How This Works #

1. Aspect Ratio Lock with padding-top:
   The original image has a 1366:800 ratio. Calculating 800/1366*100% gives us ~58.56%, which we use for padding-top. This trick makes the section's height automatically adjust to match the image's aspect ratio no matter the screen width—no distortion here.

2. background-size: cover:
   This property scales the background image proportionally to cover the entire section. If the screen's aspect ratio doesn't match the image, it will crop the edges slightly, but the image will never stretch or squish. If you prefer to show the entire image (even if it leaves empty space on the sides), swap this for background-size: contain.

3. Absolute Positioned Inner Container:
   Since we used padding-top to set the section's height, we need to pull the .container out of the normal flow so it fills the entire section. This ensures your content sits on top of the background image without being pushed down by the padding.

4. Product Image Fix:
   Your original code set the product image to width:50%, which made it only half the width of its column. Changing it to width:100% makes it fill the column properly while staying responsive.

Quick Optimization Tip #

Add a media query to adjust text sizes on smaller screens—4rem headers can get too big on mobile:

@media (max-width: 768px) {
  .main_prize_section h1 {
    font-size: 2.5rem;
  }
  .main_prize_section h2 {
    font-size: 1.8rem;
  }
}

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