适合砖石显示的完整缩略图

Question

我在这里得到水平截断的缩略图： https://magicitems.org/#/artworks

我假设这是一个 css 修复，但我尝试过的都不起作用。砌体的相关 css 代码在这里：

.my-masonry-grid {
  display: -webkit-box; /* Not needed if autoprefixing */
  display: -ms-flexbox; /* Not needed if autoprefixing */
  object-fit: contain;
  display: flex;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-left: -16px;
}

.my-masonry-grid_column {
  padding-left: 16px; /* gutter size */
  background-clip: padding-box;
}

.my-masonry-grid_column > div {
  /* change div to reference your elements you put in <Masonry> */
  margin-bottom: 30px;
}

以下反应代码引用了它，以防有帮助：

  const artworkGrid = (
    <Masonry
      breakpointCols={breakpointColumnsObj}
      className="my-masonry-grid"
      columnClassName="my-masonry-grid_column"
    >
      {!isLoading
        ? items.map((m, idx) => {
            const id = m.pubkey.toBase58();
            return (
              <Link to={`/art/${id}`} key={idx}>
                <ArtCard
                  key={id}
                  pubkey={m.pubkey}
                  preview={false}
                  height={250}
                  width={250}
                />
              </Link>
            );
          })
        : [...Array(10)].map((_, idx) => <CardLoader key={idx} />)}
    </Masonry>
  );

Answer 1

在显示缩略图的 <img> 标签上应用了 object-fit: cover。

将其更改为

object-fit: contain;

并且它会留在容器内。

The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box.

MDN Docs

事情是这样的：

之前

之后

适合砖石显示的完整缩略图

Fit full thumbnails in a masonry display

css

masonry