Вопросы Теги

Масштабирование компонента с помощью CSS вызывает неожиданное поведение [дубликат]

, предположим, что ваша переменная всегда целочисленна, в этом случае это проще 

';
echo 'var number = ' . $number . ';';
echo 'alert(number);';
echo '';

?>

output:

, предположим, что ваша переменная не является целым числом, но если вы пытаетесь выполнить выше метод, вы получите что-то вроде этого:

, но в javascript это синтаксическая ошибка.

, поэтому в php у нас есть вызов функции json_encode, который кодирует string в json-объект. 

';
echo 'var number = ' . json_encode($number) . ';';
echo 'alert(number);';
echo '';

?>

с abcd в json это "abcd", поэтому он выглядит так:

Вы можете использовать тот же метод для массивов : 

 'supun',
'age' => 456,
'weight' => '55'
];

echo '';

?>

и ваш javascript выглядит так:

консольный выход

38
задан Pretty Good Pancake 5 May 2013 в 16:10
поделиться

4 ответа

решение состоит в том, чтобы обернуть элемент внутри контейнера и изменить его размер, пока выполняется масштаб ()

Jsfiddle demo: http://jsfiddle.net/2KxSJ/

соответствующий код: 

#wrap
{
    background:yellow;
    height:66px;
    width:55px;
    padding:10px;
    float:left;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    /* more transition here */
}

#wrap:hover
{
    height:300px;
    width:260px;
}

.quarter
{
    padding:20px;
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
    background:red;
    width:250px;
    -webkit-transform-origin:left top;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    /* more transition here */
}


#wrap:hover .quarter
{
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    /* more transform-origin */
}
23
ответ дан user 21 August 2018 в 04:55
поделиться

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

$originalWidth: 100px;
$rate: 0.5;

parent {
  width: $originalWidth;
}

parent > div {
  transform: scale(1);
}

parent:hover {
  width: $originalWidth*$rate;
}

parent:hover > div {
  transform: translateX(($originalWidth * ($rate - 1))/2) scale($rate); /* the order matters*/
}

Вы можете избавиться от SCSS только с использованием переменных CSS и calc(), если хотите.

1
ответ дан Cristian Traìna 21 August 2018 в 04:55
поделиться
  • 1
    Зачем? Он отлично работает LOL – Cristian Traìna 14 August 2018 в 21:21
  • 2
    Я думаю, что сообщество извлекает выгоду из чтения объяснений относительно того, почему это сработало, даже если это небольшое объяснение. Не просто «Вот мой код». – Juan Hurtado 15 August 2018 в 16:09
  • 3
    Я думаю, что это самоочевидно, оно просто подталкивает элемент правильно, когда уменьшается зум. Я добавлю некоторые комментарии, хотя – Cristian Traìna 15 August 2018 в 16:11

, как работает transform:

  1. ваш элемент получает визуализированный
  2. ваш элемент преобразуется (перемещается, поворачивается, масштабируется)
  3. other элементы остаются там, где они оказываются - вокруг «оригинального элемента»

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

You должен использовать width и height в CSS, если вы хотите визуализировать размер элементов по-разному и отвечать на него окружающими элементами.

Или вы можете использовать что-то вроде javascript для изменения размеров.

21
ответ дан Martin Turjak 21 August 2018 в 04:55
поделиться
  • 1
    Ну, я не могу сделать это с шириной и высотой, потому что элементы, которые я хочу изменить, не находятся в процентах, и это действительно сложно сделать. Как вы это сделаете в js? – Pretty Good Pancake 5 May 2013 в 16:54

Я решил это, добавив «контур: 1px solid transparent» к элементу, где применяется шкала. 

#wrap:hover .quarter
{
   -webkit-transform: scale(0.9);
   -moz-transform: scale(0.9);
   -o-transform: scale(0.9);
   transform: scale(0.9);
   -webkit-transform-origin:left top;
   -moz-transform-origin:left top;

   outline: 1px solid transparent;
}
-2
ответ дан Ubby 21 August 2018 в 04:55
поделиться
  • 1
    Я понятия не имею, почему, но это действительно потрясающе работает во всех браузерах! Как вы дошли до этого? – italo.nascimento 26 September 2017 в 14:17
  • 2
    Не работает, и если бы это было так, было бы хорошо знать, почему. – Nino Škopac 4 January 2018 в 01:53
  • 3
    Я удалил контур: прозрачный 1px прозрачный, и он все еще работает для меня. Все, что мне было нужно, это исходные утверждения. Раньше -transform масштабировал все пробелы и центрировал сжатое изображение, поэтому этот ответ помог мне – weekapaug 29 April 2018 в 18:07
  • 4
    – argon 17 October 2018 в 14:05