Question

很抱歉，如果您听不懂我的问题。我正在从事剪刀石头布的项目，其中用户可以在计算机上玩游戏。您可以检查https://coderoo7.github.io/rockPaperScissor/ 现在，当用户选择任何选项（石头，纸张或剪刀）时，计算机都会显示它的选择（石头，纸张或剪刀），但是显示的选择要比图像显示的尺寸要大得多（比用户视图的左侧图像大）。 / p>

如何使图像在尺寸相同的两面都显示，它们是flexbox类的子级。

<section id="player">
                    <div class="score">
                        <h2>Your Score</h2>
                        <span class="scoreDisplay">0</span>
                    </div>
                    <div class="itemSelection">
                        <button class="btn" value="rock"><img src="img/rock.svg" alt=""></button>
                        <button class="btn" value="paper"><img src="img/paper.svg" alt=""></button>
                        <button class="btn" value="scissors"><img src="img/scissors.svg" alt=""></button>
                    </div>
                </section>
 <section id="computer">
                    <div class="score">
                        <h2>Computer Score</h2>
                        <span class="scoreDisplay">0</span>
                    </div>
                    <div class="itemInsert">
                     here I insert image(rock,paper or scissor) using JavaScript. But size of image is bigger than in "itemSelection" class. 
                    </div>
 </section>

作为参考，您可以使用inspect元素检查我的代码。并在移动视图中玩游戏，然后您就可以理解我的意思...

Answer 1

这是因为元素width的百分比设置（70％），所以当您在1个容器中放入3个元素时，每个元素将获得容器整个空间的1/3，而在另一个容器中容器中只有1个元素，而不是整个空间（占整个空间的70％）。

一种快速解决方案是添加2个以上元素但将其隐藏，这样可见元素将占据容器空间的1/3，与第一个容器中的其他元素相同。

Answer 2

在移动视图中，通过检查.itemSelection类下的图像尺寸，它们的高度为39.33px，这意味着您可以通过以下方式解决此问题，

将类pc-selection添加到类.itemInsert内的图像中，

<div class="itemInsert">
    <img class="pc-selection">
</div>

为.pc-selection类添加媒体查询，

@media only screen and (max-width: 320px) {
  img.pc-selection {
    height: 39.33px;
  }
}

如何相对于其同级flex-box的宽度调整flex-box子项的宽度

2 个答案: