CODEWITHSUNDEEP
htmlcss
Wojciech Szabowicz
Wojciech Szabowicz

Reputation: 4198

Resizing background images in css grid, display basing on their width

I have a simple html structure

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

Each cabinet--rack class is a display grid and in each cell of that grid I have a button and span with background image. And I have 2 type of images thin and width.

So what I am trying to do is to make them fit grid cell (span and button) by declared width, for small it is max 125px for large it is 145px.

I tried many background types but none scale to width, so is there way to solve this, the way that will make background scale height by width?

Upvotes: 1

Views: 620

Answers (1)

biberman
biberman

Reputation: 5777

The sequence is important: first the url, then the repeat and size:

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

Working example: (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>

Working example: (cover)

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

Upvotes: 1

Related Questions