Позиция SVG слева при встраивании через img

Я внедряю SVG шириной 100% и автоматической высотой. Максимальная высота составляет 80% от области просмотра.Позиция SVG слева при встраивании через img

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <style> 
     html, body{ 
      width: 100%; 
      height: 100%; 
     } 
     img{ 
      width: 100%; 
      height: auto; 
      max-height: 80vh; 
     } 
    </style> 
</head> 
<body> 
    <img src="example.svg"> 
</body> 
</html>

Если SVG не вписывается в 80% экрана просмотра, он будет обрезать указанную максимальную высоту. Проблема заключается в том, что это также CenterES в SVG:

Что мне нужно, чтобы сохранить вложение через <img> как это то, что я получаю от CMS и расположить SVG влево, как background-position: left top; бы делать. Как разместить содержимое <img> влево, даже если изображение обрезается?

источник

2017-02-10 dude

Белое пространство находится в вашем svg. Поэтому вам нужно использовать какое-то программное обеспечение, например иллюстратор или какой-либо онлайн-инструмент для удаления этого пробела. –

Нет, я проверил файл с помощью Illustrator, а пробелы генерируются стилями CSS/HTML. Он не включен в SVG! – dude

вы можете поделиться демонстрацией скрипки ..? –

Попробуйте добавить preserveAspectRatio="xMinYMin meet" укоренить SVG элемент файла SVG, как это.

<svg width="200px" height="200px" 
    viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" 
    preserveAspectRatio="xMinYMin meet"> 
    <rect width="100%" height="100%" fill="red"/> 
</svg>

источник

2017-02-10 23:12:07 defghi1977

Он работает, но делает изображение переполненным вертикально – dude

Do вы хотите, чтобы preserveAspectRatio = "xMinYMin meet" или preserveAspectRatio = "none"? – defghi1977

preserveAspectRatio = "xMinYMin meet" работает, обновите свой ответ, и я его приму – dude

Вы пробовали делать:

float:left;

источник

2017-02-10 12:18:18

Это не помогает, потому что изображение имеет ширину 100%, поэтому не имеет значения, есть ли float: left ;, display: block или display: inline-block – dude

Позиция SVG слева при встраивании через img

ответ

Смежные вопросы