div 宽度不会随缩放图像调整大小答案

【问题标题】：Div width wont resize with scaled imagediv 宽度不会随缩放图像调整大小
【发布时间】：2019-01-11 12:51:00
【问题描述】：

我使用宽度百分比缩小了 img 以更好地适应屏幕，但是父 div 的宽度没有缩放以包裹 img。

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;
}

结果 Image to show the current layout

我希望持卡人 div（紫色）适合卡片（红色）

我尝试了什么

我已尝试将卡片和持卡人的显示更改为 inline-block。我还尝试将卡片宽度保持为默认值，并改为更改卡片夹宽度和比例。然而，两者都不起作用。

谢谢！

【问题讨论】：

尝试将父 div 的高度和宽度设为自动

标签： html css sass

【解决方案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>

【讨论】：