Масштабировать изображение SVG без соотношения сторон

Question

Можно ли подогнать изображение svg к его полному размеру без сохранения соотношения сторон? В приведенном ниже примере

<img style="position: absolute; top: 12px; left: 31px; z-index: 1; width: 196px; height: 265px; " src="/media/images/logo.svg" />

Изображение svg центрируется, добавляя несколько прозрачных пробелов по его сторонам. Если я увеличу размер изображения, изображение svg увеличивается пропорционально, но не занимает все пространство, вместо этого увеличивается прозрачное пространство. Есть ли способ разрешить образу svg занимать все пространство?

Спасибо и всего наилучшего,

Нех

Answer 1

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

Чтобы предотвратить равномерное масштабирование нашего SVG-изображения, нам нужно добавить атрибут preserveAspectRatio со значением «none».

Итак, откройте файл SVG в текстовом редакторе и добавьте атрибут preserveAspectRatio = "none" в <svg> тег. Нравится:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">

Answer 2

Можно ли подогнать изображение svg к его полному размеру без сохранения соотношения сторон?

Да, если вы установите обязательные значения height и width, это должно сделатьразмер.Если вам не нужно соотношение сторон, вы можете оставить один из параметров равным auto.

Я не могу воспроизвести вашу проблему.Вы можете изменить размер содержимого div вместо img.Я приложил образец фрагмента, можете ли вы воспроизвести проблему в следующем фрагменте?

Здесь я установил свойство width & height в строке & в CSS, чтобы сделатьизменить размер.

.modified{
  height:100px;
  width:200px;
}

<img width="500px" height="300px" src="http://placeholder.pics/svg/150x250/DEDEDE/000000"/>

<img class="modified" src="http://placeholder.pics/svg/150x250/DEDEDE/000000"/>