Почему при начальной загрузке эти масштабированные элементы располагаются в столбцах по вертикали?

Question

У меня есть элемент <div>, который имеет размеры в in (он моделирует открытку, поэтому размеры должны соответствовать физической карте).Для отображения я уменьшаю эти элементы, используя transform: scale(0.5); или аналогичный.Это работает нормально, однако при попытке отобразить два из них рядом, программа начальной загрузки накладывает столбцы друг на друга, даже если элементы внутри должны располагаться рядом в максимальной ширине столбца.

У меня здесь есть JSFiddle: https://jsfiddle.net/g5jnfz9u/9/. Я ожидал бы такого поведения на мобильном устройстве, но даже на полноэкранном режиме на мониторе с высоким разрешением они по-прежнему отображаются вертикально.При проверке я вижу, что фактический элемент col по какой-то причине намного шире, чем содержимое внутри него.

Answer 1

Есть несколько вещей, происходящих.Обновленный пример здесь: https://jsfiddle.net/43ez7c0x/

Первый: при использовании классов сетки.container, row, col.Как правило, лучше не переопределять свой собственный стиль, так как он будет мешать стилям системы сетки начальной загрузки.https://getbootstrap.com/docs/4.3/layout/grid/

Второе: если вы установите элемент в столбце, чтобы иметь определенную ширину, сетка будет пытаться это учитывать.Например, если вы установите значение 5.14, оно будет установлено как минимальная ширина.

Answer 2

То, чего вы пытаетесь достичь, это поведение, более похожее на zoom :

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  display: inline-block;
  border: solid 1px #6c757d;
  padding: 10px;
}

.some-box {
  width: 6.25in;
  height: 4.25in;
  margin: 0;
  padding: 0;
  background-size: 6.25in 4.25in;
  background-color: black;
}

.scale-down {
  zoom: 0.5;
  display: inline-block;
  border: solid 3px red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      <div class="scale-down">
        <div class="some-box"></div>
      </div>
    </div>
    <div class="col">
      <div class="scale-down">
        <div class="some-box"></div>
      </div>
    </div>
  </div> 
</div>

Свойство CSS нестандартного масштабирования можно использовать для управления уровнем увеличения элемента.transform: scale () следует использовать вместо этого свойства, если это возможно.Однако в отличие от CSS Transforms, масштабирование влияет на размер макета элемента.

- https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

Answer 3

Попробуйте определить свои div класса col следующим образом:

Я думаю, что, поскольку вы масштабируете свои div, это может повлиять на работу 'col', или используемая вами версия начальной загрузки не поддерживает использование.'col'