На этой странице https://www.inagalaxyfarfarawry.com/sandboxmode/characters.php?mode=characterfocus&id=2, У меня проблемы с установкой SVG-окна подходящего размера.Теперь я знаю, что могу явно установить высоту и ширину SVG в CSS или HTML, но у меня есть около 25 изображений, которые имеют разные размеры.Поэтому я установил ширину в 600 пикселей и пытаюсь найти способ, чтобы SVG-контейнер автоматически изменял высоту.Но обратите внимание, что в ссылке SVG имеет ту же высоту и ширину, обрезая ноги на изображении, которое он содержит.Кто-нибудь знает, как заставить изображение автоматически изменять высоту?
Мне также нужно это для работы с адаптивным дизайном, где, когда окно становится меньше, скажем, шириной 650 пикселей, изображение уменьшается примерно до 75%.его размеры, поэтому до 450px в ширину и ### px в высоту.Я почти уверен, что если у кого-то есть ответ, я могу заставить его работать в адаптивном дизайне, но на всякий случай, если потребуется настройка, я решил добавить эту маленькую деталь.
Мой HTML-кодэто:
<svg id="hotspot_canvas" name="hotspot_canvas" class="hotspot" style="background-image: url('images/characters/fullbody/2.jpg');" viewbox="0 0 100 100">
</svg>
И мой CSS такой:
body.characters svg { width: 600px; background-size: cover; }
Я что-то упустил или неправильно использовал какой-то атрибут?Должен ли я добавить атрибут preserveAspectRatio?
Спасибо всем.
PS Если вы идете на страницу, не обращайте внимания на круги внутри элемента.Это другая история для другого времени, но я думаю, что понял это.