Question

我知道这很奇怪，但我试图让卡片适合游戏板。我目前的html在下面的笔中。

<container->
        <policy-boards>
            <policy-board-container class='fascist'>
                <img class='policy-board' src='http://i.imgur.com/02xsze2.png?1'>
                <img src="http://i.imgur.com/Vfa97pj.png?1" alt="" class="fascistcard1">          
            </policy-board-container>
            <policy-board-container>
                <img class='policy-board liberal-board' src='http://i.imgur.com/I8OiXQ8.png?1'>
            </policy-board-container>
        </policy-boards>
</container->

CSS：

* {
  margin: 0;
  padding: 0;
  display: block;
}

style {
  display: none;
}

container- {
  display: flex;
  flex-direction: row;
  /*flex-wrap: wrap;*/
}

policy-boards {
  flex-grow: 3;
  flex-basis: 37.5%;
}

policy-board-container {
  /*max-width: 100%;
    max-height: 100%;*/
  width: 100%
}

policy-board-container.fascist {
  positon: relative;
  top: 0;
  left: 0;
  width: 100%
}

img.policy-board {
  /*max-height: 100%;
    max-width: 100%;*/
  width: 100%;
  height 100%;
  border-radius: 0;
}

img.liberal-board {
  border-radius: 0 0 10px 10px;
}

img.fascistcard1 {
  position: absolute;
  height: auto;
  width: 11.5%;
  top: 12.5%;
  left: 9.7%;
}

出于某种原因，顶部：当策略板容器变小时，百分比不会使图像移动。如果将视图设置为横向，则图像阵列中有一个点，但是当您缩放窗口时，卡的上边缘会保持在同一位置。

对于类似问题的任何帮助或指示，我将不胜感激。我发现有人建议为父元素设置宽度，但这没有帮助。

Answer 1

你有一个错字：

policy-board-container.fascist {
  positon: relative;
  ...
}

应为“posit i on”。这对我有用。

最后，将顶部值更改为正确的偏移量：

img.fascistcard1 {
  ...
  top: 12.5%;    /* <<< make this 27% */
}

CSS top：百分比值不会缩放

1 个答案: