Титульный лист с 4 изображениями разных размеров? - PullRequest
Новая
       3

Титульный лист с 4 изображениями разных размеров?

0 голосов
/ 06 марта 2020

Я вчера опубликовал вопрос , и кто-то предложил аналогичный вопрос с ответами , который не решает эту проблему, но мой вопрос был закрыт. Итак, я снова спрашиваю с более подробным объяснением.

Я хочу, чтобы он занимал всю ширину страницы, но с высотой 590 пикселей.

Как мне этого добиться? Если возможно, фрагмент кода того, как именно это сделать.

Использование Bootstrap 4.4

Вот как я этого хочу; enter image description here

Вот фрагмент кода; 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row no-gutters">
        <div class="tile col-lg-6">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
        </div>

        <div class="tile col-lg-6">
            <img class="lazy" src="https://image.freepik.com/free-photo/fiery-orange-sunset-sky-warm-light-with-clouds-beautiful-background_9511-97.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">

            <div class="row no-gutters">
                <div class="tile col-lg-6">
                    <img src="https://img5.goodfon.com/wallpaper/nbig/5/60/4k-ultra-hd-background-sunset-dark-twilight-sky-clouds-natur.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
                </div>

                <div class="tile col-lg-6">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
                </div>
            </div>
        </div>
    </div>

1 Ответ

0 голосов
/ 10 марта 2020

Так вы можете добиться чего-то похожего на показанную картинку с помощью CSS -Grid.

Все, что вы делаете, это настраиваете сетку и ее измерения (сделано в #grid), а затем даете каждому ребенку сетку. -column-start и grid-row-start-number (первое число в grid-столбце и grid-row), а также grid-column-end-end и и и grid-row-end (последний номер). А остальное - маги c.

(в CSS -Сетка - это фактически не вызываемые номера строк и столбцов, вы ссылаетесь на линии сетки, которые вы можете легко сделать видимыми в Chrome или Firefox Инструменты разработчика.)

Подробнее о размещении на основе строки в CSS -Сетка можно прочитать здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid

Чтобы добавить изображения к этому просто поместите их в качестве фоновых изображений, как это в контейнерах изображений: 

background-image: url(yourimage.jpg);
background-size:cover;

И это все. Довольно классная штука, если вы спросите меня. Каждый должен взглянуть на CSS -Grid. 

#grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 60px repeat(4, 1fr);
  width: 100vw;
  height: 590px;
}

#navbar {
  background: blue;
  grid-column: 1 / 5;
  grid-row: 1 / 1;
}

#image1 {
  background: cyan;
  grid-column: 1 / 3;
  grid-row: 2 / 6;
}

#image2 {
  background: orange;
  grid-column: 3 / 5;
  grid-row: 2 / 4;
}

#image3 {
  background: magenta;
  grid-column: 3 / 4;
  grid-row: 4 / 6;
}

#image4 {
  background: brown;
  grid-column: 4 / 5;
  grid-row: 4 / 6;
}
<div id="grid">
  <div id='navbar'></div>
  <div id="image1"></div>
  <div id="image2"></div>
  <div id="image3"></div>
  <div id="image4"></div>
</div>
...