时间戳

首页 > 解决方案 > 来自背景图像的弹性项目大小

html - 来自背景图像的弹性项目大小

问题描述

  1. 约束每个 flex 项目，理想情况下仅通过宽度，例如 max-width: 20% （在移动设备上很好地显示它）
  2. 让弹性项目自动扩展它们的宽度/高度以显示完整的背景图像（保留上面的约束）

不幸的是，无法为此找到正确的参数组合，到目前为止它看起来像这样：

<div class="container">
    <div class="column">
        <a href="path1">name1</a>
    </div>
    <div class="column">
        <a href="path2">name2</a>
    </div>
</div>

.container {
    height: 100vh;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.column {
    max-width: 20%;
    background-image: url("./ic-folder.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: space-around;

这并没有达到目标 - 看起来每个项目都足够大，足以覆盖嵌套<a>并且他们不关心那里的背景，所以它们比预期的要小。

我有一个假设，在这种特殊情况下，我们可以将项目的大小硬编码为背景图像大小，但这意味着每次更改背景图像时，我们都需要使用其新尺寸调整 css。

是否有任何 CSS 方法可以强制元素以覆盖其背景图像的方式增长？

标签： htmlcssflexbox

解决方案

我认为不是在背景图像中添加图像，而是可以将其放在元素。当你这样做时，这个图像将是可点击的。此外，如果您使用我为img编写的样式代码，您将创建一个响应式图像。如果你想控制图像大小，你可以使用它的父 div 来控制它的宽度。所以我建议你给.column提供你想要的宽度并控制你的宽度和图像问题。

 .container {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .column {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
      max-width: 20%;
      /* background-image: url("https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg");
        background-size: contain;
        background-repeat: no-repeat; */
    }
    img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
    @media screen and(max-width: 450px) {
      .container {
        flex-direction: column;
      }
    }


<div class="container">
      <div class="column">
        <a href="path1"
          ><img
            src="https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg"
            alt=""
          />name1</a
        >
      </div>
      <div class="column">
        <a href="path2"
          ><img
            src="https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg"
            alt=""
          />name2</a
        >
      </div>
    </div>

推荐阅读