文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >创建了一个带有Bootstrap & Flexbox的映像库，但是有些映像并没有占用100%的flex容器

问创建了一个带有Bootstrap & Flexbox的映像库，但是有些映像并没有占用100%的flex容器
EN

Stack Overflow用户
提问于 2022-02-09 07:06:51
回答 3查看 499关注 0票数 0

我对web开发很陌生，我正在尝试创建一个响应性好的映像库，包括Bootstrap和flexbox，但出于某种原因，有些图像并没有达到flex容器的全部高度。

现在看起来是什么样子

​

代码语言：javascript
复制
* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  position: relative;
}

body {
  overflow-y: auto;
  min-height: 100vh;
}

.container {
  margin-top: 20px;
}

.tile {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s;
}
.tile img:hover {
  filter: brightness(50%);
  transform: scale(1.1);
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                class="img-one"
                src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
                alt=""
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/07/02/22/20/bouquet-142876_960_720.jpg"
                alt=""
                class="img-two"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_960_720.jpg"
                alt=""
                class="img-three"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_960_720.jpg"
                alt=""
                class="img-four"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_960_720.jpg"
                alt=""
                class="img-five"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_960_720.jpg"
                alt=""
                class="img-six"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"
                alt=""
                class="img-seven"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg"
                alt=""
                class="img-eight"
              />
            </a>
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

​

我应该做什么，使所有的图像都是相同的高度，或者占据全部高度的挠性容器？

html
css
flexbox
css-grid
bootstrap-5
EN

回答 3

Stack Overflow用户

发布于 2022-02-09 07:11:12

在height:100%标签上添加a

代码语言：javascript
复制
.tile a{
 height:100%;
}

​

代码语言：javascript
复制
* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  position: relative;
}

body {
  overflow-y: auto;
  min-height: 100vh;
}

.container {
  margin-top: 20px;
}

.tile {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.tile a{
 height:100%;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s;
}
.tile img:hover {
  filter: brightness(50%);
  transform: scale(1.1);
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                class="img-one"
                src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
                alt=""
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/07/02/22/20/bouquet-142876_960_720.jpg"
                alt=""
                class="img-two"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_960_720.jpg"
                alt=""
                class="img-three"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_960_720.jpg"
                alt=""
                class="img-four"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_960_720.jpg"
                alt=""
                class="img-five"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_960_720.jpg"
                alt=""
                class="img-six"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"
                alt=""
                class="img-seven"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg"
                alt=""
                class="img-eight"
              />
            </a>
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

​

票数 1
EN

Stack Overflow用户

发布于 2022-02-09 07:14:31

您需要添加.tile .picture {高度和宽度继承}，并且可以为.tile img {高度和宽度:继承}添加相同的内容--它将工作。我也为你做了演示。

​

代码语言：javascript
复制
* {
  margin: 0px;
  padding: 0px;
}

html,
body {
  position: relative;
}

body {
  overflow-y: auto;
  min-height: 100vh;
}

.container {
  margin-top: 20px;
}

.tile {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.tile .picture {
  height: inherit;
  width: inherit;
}

.tile img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  transition: all 0.2s;
}

.tile img:hover {
  filter: brightness(50%);
  transform: scale(1.1);
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                class="img-one"
                src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
                alt=""
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/07/02/22/20/bouquet-142876_960_720.jpg"
                alt=""
                class="img-two"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_960_720.jpg"
                alt=""
                class="img-three"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_960_720.jpg"
                alt=""
                class="img-four"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_960_720.jpg"
                alt=""
                class="img-five"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_960_720.jpg"
                alt=""
                class="img-six"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"
                alt=""
                class="img-seven"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg"
                alt=""
                class="img-eight"
              />
            </a>
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

​

票数 1
EN

Stack Overflow用户

发布于 2022-02-09 07:13:38

您可以使用高100%，包括'a‘标签与’标题‘的父母。

​

代码语言：javascript
复制
* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  position: relative;
}

body {
  overflow-y: auto;
  min-height: 100vh;
}

.container {
  margin-top: 20px;
}

.tile , a{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s;
}
.tile img:hover {
  filter: brightness(50%);
  transform: scale(1.1);
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                class="img-one"
                src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
                alt=""
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/07/02/22/20/bouquet-142876_960_720.jpg"
                alt=""
                class="img-two"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_960_720.jpg"
                alt=""
                class="img-three"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_960_720.jpg"
                alt=""
                class="img-four"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_960_720.jpg"
                alt=""
                class="img-five"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_960_720.jpg"
                alt=""
                class="img-six"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"
                alt=""
                class="img-seven"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg"
                alt=""
                class="img-eight"
              />
            </a>
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/71045273

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档