如何正确设置出血图像的格式，使其以适当的比例显示

Question

我有一个容器，它将内容的最大宽度保持在 1200 像素，并希望有一个主图像作为.main_prize_section的背景，并且可以在更大的屏幕上扩展，同时保持在适当的纵横比内。 主包装器图像就像主要内容的容器， 所以它不能显得扭曲。

这是 HTML 代码

<section class="main_prize_section">
<div class="container">
<div>
<div class="row">
<div class="flex_row">
<div class="col_1_2">
<div> 
<h1>TEST HEADER</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quae quo fugit asperiores, aperiam perspiciatis dolores consectetur quam nemo, laudantium et doloribus officia voluptates eveniet optio ad ab quaerat natus!</p>
</div>
<div> 
<h2>sub header</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti accusantium molestiae id a quae pariatur? Sequi ipsum quos libero aspernatur tempore molestiae facere, porro, autem perferendis, atque aut earum reiciendis.</p>
</div>
</div>
<div class="col_1_2 main_prize_product"><img src="images/english/prize_images.png" alt="" width="100%"/></div>
</div>
</div>
</div>
</div>
</section>

这是 CSS 代码

.container {
max-width: 1200px;
margin: 0 auto;
}
.flex_col {
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
display: -webkit-flex;
display: -moz-box;
display: flex;
}
.flex_row {
display: -webkit-flex;
display: -moz-box;
display: flex;
}
.col_1_2 {
width: 50%;
}
.main_prize_section {
text-align: center;
background: url("../images/prize_background.png");
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
background-position: 50% 50%;
text-align: center;
}
.main_prize_section img {
width: 50%;
margin: 0 auto;
}
.main_prize_section .flex_row {
padding: 2%;
}
.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;
}

流出的主要包装器图像是 1366x800。

Answer 1

看看这是否对你有帮助： https://codepen.io/panchroma/pen/jxxoqO

重要的一点是 CSS 行 36 - 39

.main_prize_section {
...  
background:url("../images/prize_background.png");
background-repeat: no-repeat;
background-size:cover;  /* could also be  background-size:contain; */
background-position:50% 50%;  /* adjust to fit your design and the image */
}

对于背景尺寸，请使用"覆盖"或"包含"，并结合背景位置值，找到适合您的特定设计和图像的设置组合。

祝你好运！