Настройка переменной css для увеличения размера css-графики

ProgramBox

Настройка переменной css для увеличения размера css-графики

Post author:admin
Запись опубликована:21 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Часто мне не удавалось настроить размер графического ресурса, если он находится в css. Любой инструмент или совет, как это сделать?

Например, я нашел эту проверку http://jsfiddle.net/awayF/491 /

 <span class="checkmark">
    <div class="checkmark_circle"></div>
    <div class="checkmark_stem"></div>
    <div class="checkmark_kick"></div>
</span>

Я мог бы потратить более 10 минут, пытаясь настроить здесь и там.

1. Вы пытаетесь настроить размер галочки? Или вы пытаетесь динамически изменять размер любого актива с помощью переменной?

2. Можете ли вы точно объяснить , чего вы хотите ?

3. Просто используйте изображения. Это проще в реализации и не вызывает проблем с кроссбраузерностью. Кроме того, он более широко используется

Ответ №1:

вы можете использовать свойство масштабирования

 .checkmark { zoom: 20; }

это увеличит его на 2000%

1. -moz-преобразование: масштаб (20); должно быть эквивалентным

2. 1: Ничто в вашем ответе не предполагает, что 2: Простое добавление масштаба не будет работать так, как масштабирование (попробуйте, и вы увидите) 3: -mox- префикс был удален в 2012 году

3. не уверен, что -webkit-transform: scale(20, 20); будет работать, давно не пользовался firefox :/

Ответ №2:

Вы можете масштабировать и преобразовывать checkmark контейнер, используя одно и то же свойство преобразования

Примечание: свойство преобразования может не поддерживаться некоторыми версиями браузеров

видишь

 .checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg) scale(4,4); /* IE 9 */
    -webkit-transform: rotate(45deg) scale(4,4); /* Chrome, Safari, Opera */
    transform: rotate(45deg) scale(4,4) translate(20px);;

}

.checkmark_circle {
    position: absolute;
    width:22px;
    height:22px;
    background-color: green;
    border-radius:11px;
    left:0;
    top:0;
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#fff;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#fff;
    left:8px;
    top:12px;
}

 <span class="checkmark">
    <div class="checkmark_circle"></div>
    <div class="checkmark_stem"></div>
    <div class="checkmark_kick"></div>
</span>

Развернуть фрагмент

Ответ №3:

Если вы определяете размер дочерних элементов с помощью процентов, вы просто устанавливаете размер родительского элемента, в данном случае .checkmark , , и они растут вместе с ним.

При выполнении подобным образом круг будет проходить правильно, поскольку преобразование происходит во внутреннем псевдоэлементе.

 .checkmark {
  position: relative;
  display: inline-block;
  width: 75px;
  height: 75px;
}
.checkmark2 {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
}
.checkmark_circle {
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: green;
  border-radius: 50%;
  left: 0;
  top: 0;
}
.checkmark_circle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  height: 25%;
  border-left: 8px solid white;
  border-bottom: 8px solid white;
  -webkit-transform: translate(-45%, -70%) rotate(-45deg);
  -ms-transform: translate(-45%, -70%) rotate(-45deg);
  transform: translate(-45%, -70%) rotate(-45deg);
}

 <span class="checkmark">
    <div class="checkmark_circle"></div>
</span>
<span class="checkmark2">
    <div class="checkmark_circle"></div>
</span>

Развернуть фрагмент

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

2. @JessicaIlly Понял это, и здесь у вас есть несколько ответов, показывающих некоторые варианты, просто рассмотрите мое предложение при повторном использовании других и проверьте, чтобы оно было сделано с умом, иначе вы заплатите цену… образец, который вы нашли, я сократил до 50% от его исходного кода, и это дает вашему коду лучшую из всех характеристик — производительность

3. Дал вам преимущество, представьте, что какой-то сложный вектор содержит более 80 строк кода.

4. @JessicaIlly спасибо … и для тех, кого вы используете scale в качестве repzero posted 🙂

Метки: Настройка переменной css для увеличения размера css-графики