Блог

Главная - Вопросы по программированию - ошибка преобразования масштаба для элементов фиксированной ширины

ошибка преобразования масштаба для элементов фиксированной ширины

#css #position #transform #scale

#css #положение #преобразование #масштаб

Вопрос:

У меня проблема с преобразованием масштаба.

У меня есть несколько элементов со статической шириной, и я хочу масштабировать их на небольших видовых экранах (<768 пикселей). Но если я использую «transfrom: scale ()», положение элементов будет неправильным, а не в центре. «transform-origin» не помогает. Я не могу использовать адаптивную ширину. только статический пример 280px и 840px в codepen

codepen html

 <div class="container">
  <div class="item-list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

codepen css 

 .container {
  max-width: 840px;
  border: 1px solid #000;
}

.item-list {
  display: table;
  -webkit-transform: scale(.34);
  -moz-transform: scale(.34);
  transform: scale(.34);
}

.item {
  display: table-cell;
  min-width: 280px;
  height: 634px;
  background: #000;
}

.item:first-child {
  background: #234;
}

.item:last-child {
  background: #ccc;
}

@media (min-width: 768px) {
  .item-list {
     -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }
}

Спасибо

Ответ №1:

проблема с min-width:280px on .item .

этот стиль установлен для менее 768 пикселей. 3×280 пикселей больше, чем 768, и поэтому … проблема с выравниванием.

я предлагаю вам использовать min-width:33.33% width max-width:280px (если вы хотите сохранить это, или вы можете отказаться от него) плюс добавить width:100% к .item-list

смотрите Фрагмент ниже или jsfiddle

дайте мне знать, если это поможет

 .container {
  max-width: 840px;
  border: 1px solid #000;

  box-sizing:border-box;
}

.item-list {
  display: table;
  -webkit-transform: scale(.34);
  -moz-transform: scale(.34);
  transform: scale(.34);
  width:100%;
}

.item {
  display: table-cell;
  min-width:33.33%;
  height: 634px;
  background: #000;
}

.item:first-child {
  background: #234;
}

.item:last-child {
  background: #ccc;
}

@media (min-width: 768px) {
  .item-list {
     -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }
  .item {
       min-width:33.33%;
    }
}  
 <div class="container">
  <div class="item-list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

ИЛИ вы можете установить значение НИЖЕ 768 min-width:33.33% пикселей (вместе с width:100% on item-list ) и ВЫШЕ 768 пикселей min-width:280px;

смотрите фрагмент или jsfiddle

 .container {
  max-width: 840px;
  border: 1px solid #000;
}

.item-list {
  display: table;
  -webkit-transform: scale(.34);
  -moz-transform: scale(.34);
  transform: scale(.34);
  width:100%;
}

.item {
  display: table-cell;
  min-width: 33.33%;
  height: 634px;
  background: #000;
}

.item:first-child {
  background: #234;
}

.item:last-child {
  background: #ccc;
}

@media (min-width: 768px) {
  .item-list {
     -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }
  .item {
    min-width: 280px;
  }
}  
 <div class="container">
  <div class="item-list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

PS не забудьте добавить box-sizing:border-box .container . потому что у вас есть стиль border:1px so, он становится выше и шире на 2 пикселя ( 842px x 842px вместо 840px x 840px ). итак, вам нужно установить box-sizing

Комментарии:

1. я знаю, что моя проблема со статической шириной. у меня такая структура и сценарии, что я не могу использовать процент, только 280 пикселей и 840 пикселей. (я добавляю размер коробки в примере)

2. ну. вы понимаете, что 3×280 = 840> 768 . и именно поэтому это вызывает эту ошибку . попробуйте использовать min-width:280px только OVER (в медиа-запросе) и можете ли вы использовать width:100% on .item-list ?

3. 768 < 840, вот почему я использую преобразование масштаба. возможно ли масштабировать ширину блока 840 пикселей на экране с помощью 320 пикселей. я использовал свойство zoom, но оно не работает в firefox