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

Question

我有一个容器，它将内容保持在最大宽度1200px，并希望有一个主图像作为.main_prize_section的背景放置，并且可以在更大的屏幕上展开，同时保持适当的宽高比。主包装图像就像主要内容的容器一样，所以它看起来不会扭曲。

这是html代码

Variable @helvetica-bold is undefined

这是css代码

<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>

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