时间戳

首页 > 解决方案 > 在css网格中调整背景图像的大小，根据它们的宽度显示

html - 在css网格中调整背景图像的大小，根据它们的宽度显示

问题描述

我有一个简单的html结构

.module__image--thin {
  width: 100%;
  max-width: 125px;
  height: 100%;
}

.module__image--width {
  width: 100%;
  max-width: 145px;
  height: 100%;
}

.cabinet {
  max-width: 1080px;
}

.cabinet--rack {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto;
}

.cabinet--rack--module span {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQK_GFxD_7sFWeUjtZR7CH8EKD9-4wKUKvxsw&usqp=CAU");
}
<div class="cabinet">
  <div class="cabinet--rack">
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
  </div>
  
  <div class="cabinet--rack">
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
  </div>
  
  <div class="cabinet--rack">
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
  </div>
</div>

每个cabinet-rack 类都是一个显示网格，在该网格的每个单元格中，我都有一个按钮并带有背景图像。我有两种类型的图像薄和宽。

所以我想要做的是让它们通过声明的宽度适合网格单元（跨度和按钮），对于小它是最大 125px，对于大它是 145px。

我尝试了许多背景类型，但没有按宽度缩放，那么有没有办法解决这个问题，让背景按宽度缩放高度的方法？

标签： htmlcss

解决方案

顺序很重要：首先是url，然后是repeatand size：

background: url("your_url_to_the_background");
background-repeat: no-repeat;
background-size: contain;

工作示例：（包含）

.module__image--thin {
  width: 100%;
  max-width: 125px;
  height: 100%;
}

.module__image--width {
  width: 100%;
  max-width: 145px;
  height: 100%;
}

.cabinet {
  max-width: 1080px;
}

.cabinet--rack {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto;
}

.cabinet--rack--module span {
  display: inline-block;
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQK_GFxD_7sFWeUjtZR7CH8EKD9-4wKUKvxsw&usqp=CAU");
  background-repeat: no-repeat;
  background-size: contain;
}
<div class="cabinet">
  <div class="cabinet--rack">
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
  </div>
  
  <div class="cabinet--rack">
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
  </div>
  
  <div class="cabinet--rack">
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
  </div>
</div>

工作示例：（封面）

.module__image--thin {
  width: 100%;
  max-width: 125px;
  height: 100%;
}

.module__image--width {
  width: 100%;
  max-width: 145px;
  height: 100%;
}

.cabinet {
  max-width: 1080px;
}

.cabinet--rack {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto;
}

.cabinet--rack--module span {
  display: inline-block;
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQK_GFxD_7sFWeUjtZR7CH8EKD9-4wKUKvxsw&usqp=CAU");
  background-repeat: no-repeat;
  background-size: cover;
}
<div class="cabinet">
  <div class="cabinet--rack">
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
  </div>
  
  <div class="cabinet--rack">
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
  </div>
  
  <div class="cabinet--rack">
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--thin"></span>
    </button>
    <button class="cabinet--rack--module">
      <span class="module__image--width"></span>
    </button>
  </div>
</div>

推荐阅读