Ширина Div не будет изменяться с масштабированным изображением

Question

Я уменьшил изображение, используя ширину в процентах, чтобы лучше соответствовать экрану, однако ширина родительских элементов не масштабировалась, чтобы обернуть изображение.

HTML

<div class="game-container">
  <div class="game-table">
    <img src="../../assets/img/table-top.png" class="table-image">
    <div class="table-cards">
      <div class="card-holder">
        <img class="card" src="../../assets/img/cards/blue_back.png">
      </div>
      <div class="card-holder">
        <img class="card" src="../../assets/img/cards/gray_back.png">
      </div>
      <div class="card-holder">
        <img class="card" src="../../assets/img/cards/green_back.png">
      </div>
      <div class="card-holder">
        <img class="card" src="../../assets/img/cards/red_back.png">
      </div>
      <div class="card-holder">
        <img class="card" src="../../assets/img/cards/purple_back.png">
      </div>
    </div>
  </div>
</div>

CSS

.game-container {
  height: fit-content;
  width: fit-content;
}

.game-table {
  height: fit-content;
  width: fit-content;
}

.table-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  transform: translate(-50%, -50%);
}

.table-cards {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: aqua 1px solid;
  display: flex;
}

.card-holder {
  border: blueviolet 3px solid;
  white-space: nowrap;
}

.card {
  width: 35%;
  vertical-align: middle;
  border: red 3px solid;
  display: inline-block;
  white-space:nowrap;
}

РЕЗУЛЬТАТ Изображение для отображения текущего макета

Я бы хотел, чтобы div-держатель карты (фиолетовый) соответствовал карте (красный)

ЧТО Я ПОПЫТАЛ

Я попытался изменить отображение карты и держателя карты на встроенный блок. Я также попытался сохранить ширину карты по умолчанию и изменить ширину и масштаб держателя карты. Однако ни один из них не сработал.

Спасибо!

Answer 1

Граница была причиной проблемы. Я удалил границу изображения (.card) и все заработало как положено. спасибо

.game-container {
  height: fit-content;
  width: fit-content;
}

.game-table {
  height: fit-content;
  width: fit-content;
}

.table-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  transform: translate(-50%, -50%);
}

.table-cards {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: aqua 1px solid;
  display: flex;
}

.card-holder {
  border: blueviolet 3px solid;
  white-space: nowrap;
}

.card {
  width: 35%;
  vertical-align: middle;
  /* border: red 3px solid; */
  display: inline-block;
  white-space:nowrap;
}

<div class="game-container">
  <div class="game-table">
    <img src="../../assets/img/table-top.png" class="table-image">
    <div class="table-cards">
      <div class="card-holder">
        <img class="card" src="../../assets/img/cards/blue_back.png">
      </div>
      <div class="card-holder">
        <img class="card" src="../../assets/img/cards/gray_back.png">
      </div>
      <div class="card-holder">
        <img class="card" src="../../assets/img/cards/green_back.png">
      </div>
      <div class="card-holder">
        <img class="card" src="../../assets/img/cards/red_back.png">
      </div>
      <div class="card-holder">
        <img class="card" src="../../assets/img/cards/purple_back.png">
      </div>
    </div>
  </div>
</div>