html - 使用 Flexbox 的等高图像-6ren

html - 使用 Flexbox 的等高图像

转载作者：行者123 更新时间：2023-11-28 19:14:55

25

4

我有一个页面(书籍目录)，其中书籍应在 flexbox 容器中按行显示。每本书都是一个单独的 block ，其中包含标题(书名)和正下方的书籍封面图像。我希望所有图像都具有相同的高度并填满整个 block ，但这似乎对我不起作用。这是 block 现在的样子:

一些关于 Stack 的研究指向 similar questions ，但建议的解决方案似乎也不起作用。为什么图像首先是不同的高度，即使我将 100% 高度传递给容器内的图像元素？我该如何解决这个问题？

完整的 HTML/CSS 可以在 fiddle. 中看到

HTML:

<div class="flexbox">
    <div class="item">
      <h2 class="catalogue">
        <a href="items/pyramid_texts.html" target="_blank">
           Тексты пирамид
        </a>
      </h2>
      <img class="catalogue"
           src="images/pyramid_texts.png" alt="Тексты пирамид">
    </div>

    <div class="item">
      <h2 class="catalogue">
        <a href="items/coffin_texts.html" target="_blank">
           Тексты саркофагов
        </a>
      </h2>
      <img class="catalogue"
           src="images/coffin_texts.jpg" alt="Тексты саркофагов">
    </div>

    <div class="item">
      <h2 class="catalogue">
        <a href="items/book_of_the_dead.html" target="_blank">
           Египетская книга мертвых
        </a>
      </h2>
      <img class="catalogue"
           src="images/book_of_the_dead.png" alt="Книга мертвых">
    </div>
  </div>

CSS:

  a
  {
    color: black;
    text-decoration: none;
  }

  a:hover
  {
    color: red;
  }

  div.flexbox
  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  div.item
  {
    height: 20%;
    width: 20%;
  }

  h2
  {
    background-color: #FFF3D9;
    color: black;
    font-size: 18px;
    font-weight: 400px;
    style: block;
    text-align: center;
  }

  img
  {
    height: 20%;
    outline: 2px solid red;
    width: 20%;
  }

  img.catalogue
  {
    height: 100%;
    object-fit: contain;
    width: 100%;
  }

更新:尝试使用 background-size: cover 进行试验和其他 CSS 元素，但无济于事。会不会是我的 HTML 结构不适合这项任务？现在我有一个父 flexbox block ，每个“元素” block (对于每本书)都包含一个带有书名和 <img> 的标题元素。元素。例如，我是否应该更改结构并将标题从元素 block 中取出？

最佳答案

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Demo</title>
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
    }
    
    a {
      color: black;
      text-decoration: none;
    }
    
    a:hover {
      color: red;
    }
    
    h2 {
      background-color: #FFF3D9;
      color: black;
      font-size: 18px;
      font-weight: 400;
      style: block;
      text-align: center;
    }
    
    img {
      height: 20%;
      outline: 2px solid red;
      width: 100%;
    }
    
    img.catalogue {
      height: 100%;
      object-fit: contain;
      width: 100%;
      display: block;
      margin: 0 auto;
      text-align: center;
    }
    
    .flexbox {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      overflow: hidden;
    }
    
    .flexbox .col {
      flex: 1;
      padding: 7px;
    }
    
    .flexbox .col:nth-child(1) {
      background: #ccc;
      -webkit-order: 1;
      -ms-flex-order: 1;
      order: 1;
    }
    
    .flexbox .col:nth-child(2) {
      background: #eee;
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
    }
    
    .flexbox .col:nth-child(3) {
      background: #eee;
      -webkit-order: 2;
      -ms-flex-order: 2;
      order: 2;
    }
  </style>
</head>

<body>
  <div class="flexbox">
    <div class="col">
      <div class="item">
        <h2 class="catalogue">
          <a href="items/pyramid_texts.html" target="_blank">
                   Тексты пирамид
                </a>
        </h2>
        <img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Тексты пирамид">
      </div>
    </div>
    <div class="col">
      <div class="item">
        <h2 class="catalogue">
          <a href="items/coffin_texts.html" target="_blank">
                   Тексты саркофагов
                </a>
        </h2>
        <img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Тексты саркофагов">
      </div>
    </div>
    <div class="col">
      <div class="item">
        <h2 class="catalogue">
          <a href="items/book_of_the_dead.html" target="_blank">
                   Египетская книга мертвых
                </a>
        </h2>
        <img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Книга мертвых">
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

关于html - 使用 Flexbox 的等高图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58558737/

25

4

0

文章推荐： iphone - UIView 不随 UIscrollView 移动

文章推荐： python - 斯坦福手套 : Dimension anomaly in glove. twitter.27B.200d

文章推荐： javascript - Highcharts 。饼形图。数据标签格式化程序

文章推荐： ios - 模拟器是否可以很好地判断 iOS 兼容性？

php - 价格低-高/高-低过滤 PHP/Mysql
我正在寻找一种方法来创建根据价格选择我的产品的过滤器(选择下拉菜单)。我知道这样的查询是完全可能的: SELECT * FROM products ORDER BY price ASC SELECT
language-agnostic - 是(宽，高)还是(高，宽)？
函数参数中或显示尺寸时(高度，宽度)的顺序是否有约定？最佳答案我不知道大量的语言，但我使用过的语言(宽度，高度)。它更适合沿着 (x, y) 坐标线。关于language-agnostic -
javascript - 如果是计算形式，则计算立方米=高*平方米或立方米=长*宽*高
在我的表单中，我让用户输入房间的长度高度和宽度以获得 m2、m3 和瓦特的计算值。但是用户也应该能够直接输入 height 和 m2 来获取值。我尝试了很多语法，但 if else 不能正常工作。我知
elasticsearch - 创建索引的未知键 [高]
我在 Elasticsearch 中创建了一个索引，看起来像 {"amazingdocs":{"aliases":{},"mappings":{"properties":{"Adj Close":{"
快速将多个图像一次保存到文件系统，CPU 高
我有以下功能，我需要清除数据库中的所有图片列并移动到文件系统。当我一次性完成这一切时，内存太多并且会崩溃。我切换到递归函数并执行 20 次写入和批量操作。我需要为大约 6 个表执行此操作。我的 Re
C# 高 double
我正在编写一个函数来计算 PI 的值，并将其作为 double 值返回。到目前为止，一切都很好。但是一旦函数到达小数点后14位，它就不能再保存了。我假设这是因为 double 有限。我应该怎么做才能继
与传统cdn相比高性能cdn “高”在哪里?
2020年是中国CDN行业从98年诞生到今天快速发展的第二十四年，相关数据显示，全国感知网速持续上扬，达到了3.29兆/秒，标志着在宽带中国的政策指导下，中国的网速水平正在大步赶上世界发达国家的水平
lua - 高 Aerospike 延迟
在 aerospike 集合中，我们有四个 bin userId、adId、timestamp、eventype，主键是 userId:timestamp。在 userId 上创建二级索引以获取特定用
onclick - 高 map 获取点击事件的国家名称
$('#container').highcharts('Map', { title : { text : 'Highmaps basic demo'
youtube - YouTube嵌入广告的视频尺寸更大(宽/高)
有没有办法显示自定义宽度/高度的YouTube视频？最佳答案在YouTube网站上的this link中: You can resize the player by editing the obj
javascript - 高 map 中的动态悬停颜色
我使用 Highcharts ，我想在 Highcharts 状态下悬停时制作动态不同的颜色。正如你可以看到不同的颜色，这就是我做的 var usMapChart , data = [] ; va
cassandra - 高 native 传输请求始终被阻止
在所有节点上运行 tpstats 后。我看到很多节点都有大量的 ALL TIME BLOCKED NTR。我们有一个 4 节点集群，NTR ALL TIME BLOCKED 的值为: 节点 1:239
apc - 高 APC 碎片重要吗？
我发现 APC 上存在大量碎片 (>80%)，但实际上性能似乎相当不错。我有 read another post这建议在 wordpress/w3tc 中禁用对象缓存，但我想知道减少碎片是否比首先缓存
python - 高/低游戏 : ValueError
对于我的脚本类(class)，我们必须制作更高/更低的游戏。到目前为止，这是我的代码: import random seedVal = int(input("What seed should be u
apc - 高 APC 碎片重要吗？
我发现 APC 上存在大量碎片 (>80%)，但实际上性能似乎相当不错。我有 read another post这建议在 wordpress/w3tc 中禁用对象缓存，但我想知道减少碎片是否比首先缓存
python - 高/低游戏 : ValueError
对于我的脚本类(class)，我们必须制作更高/更低的游戏。到目前为止，这是我的代码: import random seedVal = int(input("What seed should be u
unicode - 高 unicode 代码点如何表示为两个代码点？
我已经 seen >2 字节的 unicode 代码点，如 U+10000 可以成对编写，如 \uD800\uDC00。它们似乎以半字节 d 开头，但我只注意到了这一点。这个 split Actio
javascript - 高(饼)图计算不正确
有人可以帮我理解为什么我的饼图百分比计算不正确吗？看截图: 根据我的计算，如 RHS 上所示，支出百分比应为 24.73%。传递给 Highcharts 的值如下:- 花费:204827099.36-
Mysql 高 CPU 使用率甚至优化配置
我阅读了有关该问题的所有答案，但我还没有找到任何解决方案。我有一个应用程序，由我的 api 服务器提供。 Wildfly 8.1 和 Mysql 5.6。当查看时间到来时(Wildfly 服务器连接
javascript - 高 Angular 圆圈周围的元素
我正在用选定的项目创建圆形导航。当用户单击任何项目时，它将移动到定义的特定点。一切都很好，除了当你继续点击项目时，当动画表现不同并且项目在 360 度圆中移动并且它被重置直到你重复场景时，我希望它

首页

博学

6Ren·AI

商城

html - 使用 Flexbox 的等高图像