Question

我想使用像这样的https://www.prabhukrishna.com/css_image.jpg

来实现div的响应式图像横幅外观

在移动设备上，所有图像都应垂直对齐。

我尝试了很多技巧，但是没有运气

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

Answer 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网格和媒体查询的更多信息，它们是我们所生活的CSS世界的热门话题。

我如何实现这种响应行为

1 个答案: