Блог

Главная - Вопросы по программированию - Как я могу добиться такого адаптивного поведения

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

#css #responsive

#css #адаптивный

Вопрос:

я хочу добиться адаптивного вида баннера с изображением, используя 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:

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

 <!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 grid amp; media запросах, они являются актуальными темами мира css, в котором мы живем.

Комментарии:

1. спасибо noyloy. ваше решение сработало как нельзя лучше. еще раз спасибо за помощь такому новичку, как я.