Как я могу добиться этого отзывчивого поведения - PullRequest
Новая
       15

Как я могу добиться этого отзывчивого поведения

0 голосов
/ 05 апреля 2019

Я хочу добиться адаптивного изображения баннера с использованием div, как это https://www.prabhukrishna.com/css_image.jpg

на мобильных устройствах, все изображения должны быть выровнены по вертикали.

Я перепробовал много трюков, но нетудача 

<style>
.columns {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 5px 0;
}
.column {
    flex: 1;
    margin: 2px;
    padding: 10px;

}
</style>

<section class="columns">
    <div class="column">
        <img src="image1.jpg" > 
    </div>
    <div class="column">
        <img src="image2.jpg" > 
    </div>
    <div class="column">
        <img src="image3.jpg" > 
    </div>
    <div class="column">
        <img src="image4.jpg" > 
    </div>
    <div class="column">
        <img src="image5.jpg" > 
    </div>

</section>

1 Ответ

0 голосов
/ 05 апреля 2019

это поможет вам начать: 

<!DOCTYPE html>
<html>

<head>
<style>

    .img {
        min-height: 150px;
        min-width: 150px;
        background-image: url("https://via.placeholder.com/150");
        background-size: cover;
    }

    .image1 {grid-area: image1;}
    .image2 {grid-area: image2;}
    .image3 {grid-area: image3;}
    .image4 {grid-area: image4;}
    .image5 {grid-area: image5;}

    .grid-container {
        display: grid;
        grid-gap: 10px;
        background-color: #2196F3;
        padding: 10px;
    }

    @media screen and (max-width: 500px) {
        .grid-container {
            grid-template-areas:
                'image1'
                'image2'
                'image3'
                'image4'
                'image5';
        }
    }

    @media screen and (min-width: 500px) {
        .grid-container {
            grid-template-areas:
                'image1 image5 image2'
                'image3 image5 image4';
        }
    }
</style>
</head>

<body>

<div class="grid-container">
    <div class="img image1"></div>
    <div class="img image2"></div>
    <div class="img image3"></div>
    <div class="img image4"></div>
    <div class="img image5"></div>
</div>

</body>

</html>

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

...