Как правильно отформатировать кровоточащее изображение, чтобы оно отображалось в правильном соотношении - PullRequest
Новая
       51

Как правильно отформатировать кровоточащее изображение, чтобы оно отображалось в правильном соотношении

0 голосов
/ 11 мая 2018

У меня есть контейнер, который поддерживает максимальную ширину содержимого 1200px, и я хочу иметь основное изображение, которое размещается в качестве фона .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.

1 Ответ

0 голосов
/ 12 мая 2018

Посмотрите, поможет ли это вам: 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 */
}

Для размера фона используйте «cover» или «входить», и в сочетании со значениями положения фона найдите комбинацию настроек, подходящих для вашего конкретного дизайна и изображения.

Удачи!

...