Изменить размер изображения с помощью Calc () CSS

Question

Я пытаюсь изменить размер любого изображения с существующими свойствами высоты и ширины на процент (и сохранить пропорции).Я знаю, что transform: scale (1.05) будет брать изображение размером 100 на 100 пикселей и делать его размером 105 на 105 пикселей, но все равно будет занимать только оригинальное пространство 100x100 в потоке страницы.

Как бы я сделал что-то вроде:

<img src="an.svg" width="100" height="100" alt="bigger please" class="resize"  data-width="100" data-height="100"/>

img.resize {
  height: auto;
  width: calc(original width * 5%);
}

, чтобы браузер отображал изображение размером 105 на 105 пикселей и занимает все 105x105?

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

Кроме того, я не могу использовать оболочку или фоновое изображение, но у меня есть доступ к атрибутам data-height и data-widthприсутствует на изображениях.Кодовый код здесь: https://codepen.io/spicedham/pen/qMKLYq

Answer 1

После исчерпывающей попытки каждой перестановки, о которой я только мог подумать, у меня есть какое-то решение.Это требует двух вещей, которых я пытался избежать (контейнер и встроенные стили), но это работает как часть системы.Некоторые дополнительные сведения: я работаю над веб-приложением, которое позволяет пользователям устанавливать базовый размер шрифта (например, 12, 14, 16 или 18pt), а затем также обрабатывает масштабирование в диапазоне от 10% до 300% дляпользователи со слабым зрением.У нас есть некоторые изображения (в основном математические выражения), которые встроены в окружающий контент страницы в виде SVG.На уровнях печати и масштабирования по умолчанию SVG с номером «3» имеет тот же размер, что и обычный текст № 3 рядом с ним.Но вещи не совпадают, так как другие переменные начинают меняться.Описанная ниже методика, как только она будет внедрена, позволит нам точно контролировать, как эти изображения соответствуют окружающему тексту независимо от размера печати или уровня масштабирования.

Вот ссылка на решение в codepen https://codepen.io/spicedham/pen/pxzYYe и вариант с использованием ... переменных https://codepen.io/spicedham/pen/MPgxxo.

Вот CSS:

        .container {
            display: inline-flex;
            vertical-align: middle;
            border-left: solid .05em transparent;
            border-right: solid .05em transparent;
        }
        .scaleMe {
            transform: scale(1.1);
            margin: .05em 0;
        }

А вот как выглядят изображения и контейнеры:

<span class="container" style="font-size: 300px;"><img class="scaleMe" src="svg.svg" width="300" height="100" alt="" style="font-size: 100px"/></span>

<span class="container" style="font-size: 100px"><img class="scaleMe" src="svg.svg" width="100" height="200" alt="" style="font-size: 200px"/></span>

Проблема, с которой я столкнулся, независимо от того, использовал ли я calc () или transform: scale (), заключалась в том, что я не мог получить контент для последовательного переформатирования вокруг измененного изображения - масштабированное изображение перекрывало бы смежный контент.Это было возможно, если бы все изображения были одинакового размера или имели одинаковые пропорции, но я не могу рассчитывать на это в нашей системе.

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

Таким образом, решение заключалось в создании резервной относительной единицы em.Я взял ширину изображения (скажем, 300 пикселей) и установил его в качестве размера шрифта для контейнера.Затем я взял высоту изображения (скажем, 100 пикселей) и установил его в качестве размера шрифта изображения.Это позволяет мне открыть контейнер, чтобы он занимал то же пространство, что и масштабированное изображение.Получает ограничение на невозможность использовать проценты для ширины границ и точно устанавливает эквивалент процента для верхнего и нижнего полей изображения.

Answer 2

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

проверьте эту ручку, чтобы увидеть пример. https://codepen.io/calebswank11/pen/gdKBRE

.container {
  width: 300px;
  height: 300px;
}
img {
  display: block;
  width: calc(100% + 5%);
  height: calc(100% + 5%);
  left: -2.5%;
  top:-2.5%;
  position: relative;
}

Answer 3

Если для использования тега img нет необходимости (и изображение всегда имеет одинаковое соотношение сторон, если оно динамическое), тогда вы можете использовать div с фоновым изображением и присвоить ему height: 0; и padding-bottom: 100% (или любой другой процент, который создаст соответствующее соотношение сторон) и измените его таким образом с помощью CSS-преобразований

Answer 4

Я не думаю, что вы можете использовать атрибут ширины / высоты изображения для определения новой ширины / высоты.Вы можете рассмотреть встроенные стили и переменную CSS следующим образом:

img {
  width:calc((var(--width) * 5/100 + var(--width))*1px);
  height:auto;
}

<img src="https://picsum.photos/100/100?image=1069" height="100" >
<br>
<img src="https://picsum.photos/100/100?image=1069" height="100" style="--width:100">