Question

我使用宽度百分比将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（紫色）适合卡（红色）

我尝试过的东西

我尝试将卡和持卡人的显示更改为嵌入式。我还尝试过将卡的宽度保留为默认值，并改为更改卡夹的宽度和比例。但是，两者都没有。

谢谢！

Answer 1

边界导致了问题。我删除了image（.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>

Div宽度不会随着缩放的图像调整大小

1 个答案: