css 如何将Flexbox样式化的图像元素div集自动调整到主容器的宽度？

3qpi33ja 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(146)

假设有一个要在网页上显示的图像列表。列表中的图像应分组在同一水平行中（例如，显示：flex），这些组应显示在垂直列中（例如，显示：弯曲;弯曲方向：列）。水平排列的图像组的总高度应该等于视口的高度。整个列表中图像组的数量和组内图像的数量是可变的，但是我使用两组图像（每组两张）作为概念证明。此外，这些图像的原始大小是可变的，因此需要调整它们的大小。
如何调整图像的大小，以保持其纵横比，并适合在网页内没有溢出？
我用下面的CSS编写了下面的HTML代码来实现这个目的。问题是图像的大小根本没有调整到主div的大小，图像组div溢出了主容器。我如何强制图像组div缩小到主容器的高度，图像调整到其父div的高度？
超文本：

<body>
    <div class="main-container">
        <div class="image-group" id="dup-set-1">
            <img src="./images/1.jpg" class="duplicate-image">
            <img src="./images/2.jpg" class="duplicate-image">
        </div>
        <div class="image-group" id="dup-set-2">
            <img src="./images/3.png">
            <img src="./images/4.jpg">
        </div>
    </div>
</body>

CSS：

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.main-container {
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 100%;
    height: 100vh; /* Make the whole container the height of the viewport*/
    border: 10px red solid;
}

.image-group {
    flex: 1; /* Size the group divs to the height of the main container */
    display: flex;
}

.image-group img {
    max-height: 100%;
    max-width: 100%;
    height: 100%; /* Make the image height fit the height of its parent group div */
    width: auto; /* Scale the image to keep its original apsect ratio */
}

我看过建议使用flex-grow的this question,和建议使用object-fit的this question;;然而这些问题仅涉及一个图像组（即仅一个中间div），并且似乎没有调整图像组div的大小。

css

来源：https://stackoverflow.com/questions/74903920/how-can-div-sets-of-image-elements-styled-by-flexbox-be-autosized-to-to-width-of

2条答案

按热度按时间

p1tboqfb1#

正在工作... （编辑：改进的代码）

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Modal Popup Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        .main-container {
            display: flex;
            flex-direction: column;
            margin: auto;
            max-width: 100%;
            max-height: 100%;
            border: 10px red solid;
        }

        .image-group {
            max-width: 50%;
            max-height: 50%;
            min-width: 50%;
            min-height: 50%;
            display: inline-flex;
            flex-direction: row;
        }

        .image-group img {
            max-width: 100%;
            height: auto;
            object-fit: cover;
        }
    </style>
  </head>
  <body>
    <div class="main-container">
        <div class="image-group" id="dup-set-1">
            <img src="https://images.pexels.com/photos/6102161/pexels-photo-6102161.jpeg?auto=compress&cs=tinysrgb&w=600" class="duplicate-image">
            <img src="https://images.pexels.com/photos/6101986/pexels-photo-6101986.jpeg?auto=compress&cs=tinysrgb&w=600" class="duplicate-image">
        </div>
        <div class="image-group" id="dup-set-2">
            <img src="https://images.pexels.com/photos/3334492/pexels-photo-3334492.jpeg?auto=compress&cs=tinysrgb&w=600">
            <img src="https://images.pexels.com/photos/5802141/pexels-photo-5802141.jpeg?auto=compress&cs=tinysrgb&w=600">
        </div>
    </div>
</body>
</html>

flex css属性应使用3个参数：增长、收缩、基础

grow确定flexbox是否可以占用全部空间（如果有）
shrink如果需要，确定Flexbox是否可以采用更多大小!
basis确定其限制（大小）

示例如下：

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Document</title>
    <style>
    body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    #wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    #wrapper > header {
        width: 100%;
        flex: 0 0 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #e5e5e5;
        border-bottom: 1px solid #9b9b9b;
    }
    #wrapper > section {
        width: 100%;
        flex: 1 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    </style>
  </head>
  <body>
    <section id="wrapper">
        <header>HEADER</header>
        <section>CONTENT</section>
    </section>
</body>
</html>

赞(0）回复(0）举报 2022-12-24

kgsdhlau2#

这里是问题的解决方案。我使用Unsplash图像为这个演示这些照片不是我的，它只是演示的目的。

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.main-container {
    border: 10px red solid;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));/*here two is the number of the columns of your images*/
    grid-gap: 1.2rem;
}

.image-group {
    display: grid;
    grid-gap: 2rem;
    place-items: center;
    object-fit: scale-down;
    grid-template-columns: minmax(0,1fr);
}

.image-group img {
    max-height: 100%;
    max-width: 100%;
}

<body>
    <div class="main-container">
        <div class="image-group" id="dup-set-1">
            <img src="https://images.unsplash.com/photo-1670272502972-cccb4b96c4f4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="duplicate-image">
            <img src="https://images.unsplash.com/photo-1671624524528-5822d43e9100?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=392&q=80" class="duplicate-image">
        </div>
        <div class="image-group" id="dup-set-2">
            <img src="https://images.unsplash.com/photo-1671816551591-d50359cd744c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
            <img src="https://images.unsplash.com/photo-1664575600397-88e370cb46b8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
        </div>
    </div>
</body>

"我希望你得到了答案"

赞(0）回复(0）举报 2022-12-24

我来回答

css 如何将Flexbox样式化的图像元素div集自动调整到主容器的宽度？

2条答案

相关问题

热门标签

最新问答