使用 Flexbox 的等高图像

Question

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

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

完整的 HTML/CSS 可以在小提琴中看到。

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 块，每个“项目”块（对于每本书）都包含一个 header 元素和一个<img>元素。 例如，我是否应该更改结构并将 header 从项目块中取出？

Answer 1

您可以使用此代码

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

使用 Flexbox 的等高图像

问题描述

1 个解决方案

解决方案1
0 2019-10-25 13:14:17

使用 Flexbox 的等高图像

问题描述

1 个解决方案

解决方案1 0 2019-10-25 13:14:17

解决方案1
0 2019-10-25 13:14:17