基于内部图像宽度的灵活列宽（固定高度）

Posted 2023-03-06

【中文标题】基于内部图像宽度的灵活列宽（固定高度）

【英文标题】：Flexible column width based on image width inside (with fixed height)

【发布时间】：2022-01-20 03:49:17

【问题描述】：

我使用 Elementor 创建了一个 10 列的容器。

如何根据列宽固定图像高度内的图像宽度设置列宽？像下面的例子：

我的 elementor 设置类似于这个布局：

<div class="container">
    <div class="column">
        <img src="#">
        <h2>Book Title</h2>
        <h5>Author</h5>
        <p>Price</p>
        <button>Buy Now</button>
    </div>
</div>

【问题讨论】：

虽然您可以使用一组网格（每行一个）获得每行 5 个项目的所需布局，但这种布局不适用于狭窄的视口。当文本太宽而无法每行包含 5 个项目时，您希望发生什么？

你如何根据图像宽度设置流体网格？我认为对于狭窄的视口，我会将其减少到每行 3 个等。

是的，需要考虑。您在图片中显示的布局仅真正有效，因为它是书籍封面，即主要是带有奇怪正方形的肖像，没有风景 - 非常饥饿的毛毛虫需要什么？

【参考方案1】：

这是对原始问题的一种回答（2 行，每行 5 个条目），但显然它并不完整，因为需要一些额外的方法来处理窄视口或几个宽视口- 高图像。

我把这个 sn-p 放在这里，以防它有助于找到更通用的解决方案：

您知道每行需要 5 个条目，无论它们的各种图像的纵横比如何，您可以将每个条目布置为 5 列的网格，第一个图像占总高度的 50%（或您需要的任何值）。

每一行都是独立的，因为您希望它根据其内容的图像纵横比进行调整，而不考虑其他行的列布局。

查看 sn-p 完整页面。

* 
  padding: 0;
  margin: 0;

body 
  width: 100vw;


.container 
  width: 90%;
  margin: 0 auto;


.row 
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: space-between;


.column img:first-of-type 
  height: 50%;

<div class="container">
  <div class="row">
    <div class="column">
      <img src="https://picsum.photos/id/1015/200/300">
      <h2>Book Title</h2>
      <h5>Author</h5>
      <p>Price</p>
      <button>Buy Now</button>
    </div>
    <div class="column">
      <img src="https://picsum.photos/id/1015/300/300">
      <h2>Book Title</h2>
      <h5>Author</h5>
      <p>Price</p>
      <button>Buy Now</button>
    </div>
    <div class="column">
      <img src="https://picsum.photos/id/1015/200/200">
      <h2>Book Title</h2>
      <h5>Author</h5>
      <p>Price</p>
      <button>Buy Now</button>
    </div>
    <div class="column">
      <img src="https://picsum.photos/id/1015/200/300">
      <h2>Book Title</h2>
      <h5>Author</h5>
      <p>Price</p>
      <button>Buy Now</button>
    </div>
    <div class="column">
      <img src="https://picsum.photos/id/1015/200/300">
      <h2>Book Title</h2>
      <h5>Author</h5>
      <p>Price</p>
      <button>Buy Now</button>
    </div>
  </div>
  <div class="row">
    <div class="column">
      <img src="https://picsum.photos/id/1015/300/400">
      <h2>Book Title</h2>
      <h5>Author</h5>
      <p>Price</p>
      <button>Buy Now</button>
    </div>
    <div class="column">
      <img src="https://picsum.photos/id/1015/300/300">
      <h2>Book Title</h2>
      <h5>Author</h5>
      <p>Price</p>
      <button>Buy Now</button>
    </div>
    <div class="column">
      <img src="https://picsum.photos/id/1015/200/300">
      <h2>Book Title</h2>
      <h5>Author</h5>
      <p>Price</p>
      <button>Buy Now</button>
    </div>
    <div class="column">
      <img src="https://picsum.photos/id/1015/100/300">
      <h2>Book Title</h2>
      <h5>Author</h5>
      <p>Price</p>
      <button>Buy Now</button>
    </div>
    <div class="column">
      <img src="https://picsum.photos/id/1015/200/200">
      <h2>Book Title</h2>
      <h5>Author</h5>
      <p>Price</p>
      <button>Buy Now</button>
    </div>
  </div>
</div>

【讨论】：

嘿，海沃氏，它看起来很棒，而且方向正确！但是，我需要将 10 个项目放在同一个容器中（每行分成 5 个项目），因为它需要是使用 elementor 插件的项目动态列表（图书排名）。