主页 / 问题 / 1602793
Accepted
KLYSTRON
Asked:2024-12-19 03:27:19 +0000 UTC2024-12-19 03:27:19 +0000 UTC

缩放 div 元素

  • 772

晚安！我必须寻求建议，因为...我自己不太可能弄清楚。实际上有如下结构：

div {
    border: 1px solid black;
}

.window {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    overflow: hidden;
    width: 628px;
    height: 632px;
    padding: 4px;
}

.items>div {
    width: 200px;
    height: 200px;
    margin: 4px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title></title>
</head>

<body>
    
    <div class="window">
        <div class="items">
            <div class="item_1">1</div>
            <div class="item_2">2</div>
            <div class="item_3">3</div>
            <div class="item_4">4</div>
            <div class="item_5">5</div>
            <div class="item_6">6</div>
            <div class="item_7">7</div>
            <div class="item_8">8</div>
            <div class="item_9">9</div>
        </div>
    </div>

</body>

</html>

窗口容器，由于项目容器位于窗口的中心，项目本身的固定大小为 628px x 632px。 items中有9个div，高度和宽度也固定为200px。任务如下所示：我们需要确保当浏览器窗口的大小减小时，项目及其子 div 也会减小，同时保持具有所有缩进的 3x3 结构。然后，当浏览器窗口放大时，相反，它们达到了最大尺寸并且不再进一步增大。那些。像这样的东西：

屏幕

我已经处理这个问题第三天了，没有太大进展。我们设法使其宽度全部缩放，但并不完全符合需要。这样的事情，我将感谢您的帮助和暗示，以挖掘哪个方向。

css3

1 个回答

  1. Best Answer

    如果您正确理解了问题的情况，那么这就是您的解决方案。

    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div {
  border: 1px solid black;
}

.window {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  /* Базовый размер и максимальные ограничения */
  max-width: 628px;
  max-height: 632px;
  width: 100vw;
  height: 100vw;

  padding: 4px;

  /* Минимальное уменьшение размеров */
  aspect-ratio: 628 / 632;
}

.item {
  flex: 1 1 calc(33.333% - 8px);
  /* 3 элемента в ряду с учетом отступов */
  max-width: 200px;
  margin: 4px;
  aspect-ratio: 1 / 1;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
    <div class="window">
  <div class="items">
    <div class="item item_1">1</div>
    <div class="item item_2">2</div>
    <div class="item item_3">3</div>
    <div class="item item_4">4</div>
    <div class="item item_5">5</div>
    <div class="item item_6">6</div>
    <div class="item item_7">7</div>
    <div class="item item_8">8</div>
    <div class="item item_9">9</div>
  </div>
</div>

    *这是移动设备上的 Tic Tac Toe 字段还是来自赌博的东西？

    • 0

相关问题