Как подогнать мое SVG-изображение к div-оболочке Parent?

У меня есть следующий фрагмент кода, с которым я работаю. Я не мог заставить свое изображение SVG соответствовать моему контейнеру div.

.img {
    margin: 0; 
    padding: 0; 
    overflow: hidden
    width: 500px;
    position: relative;
}

img {
    top:0;
    left:0;
    height:500px;
    width:100%;
}
<div class = "img">
  <img src = "https://svgur.com/i/SPb.svg" alt = "An svg image">
</div>

Мой Кодепен: https://codepen.io/huyct1996/pen/zYKwXjM

Любая помощь будет высоко оценена. Спасибо

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

Tom Myddeltyn 17.12.2020 20:29
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
1
1 957
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Просто используйте width:100%; height:100% в CSS. Это заставит SVG занять все пространство div.

<div class = "img">
  <img style = "width:100%; height: 100%;" src = "img.svg" alt = "image">
</div>

Спасибо за помощь, я пытался, но содержимое в svg "перетащите сюда" не изменяет размер с помощью div

Huy Nguyen 17.12.2020 18:34

@HuyNguyễn что это?

Rojo 17.12.2020 18:36

Когда я добавляю "style = " width: 100%; высота: 100%; "на это все еще не работает, вы идете в codepen, чтобы помочь мне? Большое спасибо

Huy Nguyen 17.12.2020 18:44

@HuyNguyễn Эй, Нгуен, ты прав. Я пробовал, но высота не 500 пикселей, а больше. 544px. Покажи нам. Если я могу найти что-то

Imran Rafiq Rather 17.12.2020 18:48

@ImranRafiqRather Спасибо, я новичок, поэтому с нетерпением жду вашей помощи.

Huy Nguyen 17.12.2020 18:53

Нет проблем, дорогой друг. Я посмотрю, что с этим делать. И, надеюсь, придумать решение... ИншаАллах :) Кажется, у вас есть обновленный код. дайте-ка подумать

Imran Rafiq Rather 17.12.2020 19:00

Ваша проблема решена уважаемый. Попробуйте мой ответ. Это будет работать во всех сценариях :) Теперь счастлив. Примите мой ответ для других разработчиков. Также оцените моего друга. И если вам нужна какая-либо другая помощь, дайте мне знать :)

Imran Rafiq Rather 17.12.2020 19:08

Также отредактировали ваш вопрос для лучшей читабельности. Наслаждайтесь кодированием, дорогой. Нужна помощь, дайте мне знать :) До свидания

Imran Rafiq Rather 17.12.2020 19:26

Ваша проблема решена с помощью object-fit:contain: попробуйте следующий код:

ОБНОВЛЕНИЕ: у самого SVG есть некоторые проблемы, поэтому я напрямую поместил SVG в HTML, чтобы показать вам, как это сделать правильно:

 .img-wrapper {
        height: 500px;
        width: 500px;
      }

      img {
        height: 100%;
        width: 100%;
        object-fit: contain;
      }
<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class = "img-wrapper">
      <!-- <img
        src = "https://raw.githubusercontent.com/huyct1996/images/3ddca45402fbc1ce4ee0f1a58f67a34f87f2d8aa/empty.svg"
        alt = "An SVG Image"
      /> -->

      <svg
        xmlns = "http://www.w3.org/2000/svg"
        width = "100%"
        height = "100%"
        fill = "none"
      >
        <rect width = "100%" height = "1" fill = "#ECEEF4" />
        <rect y = "112" width = "100%" height = "1" fill = "#ECEEF4" />
        <rect y = "336" width = "100%" height = "1" fill = "#ECEEF4" />
        <rect y = "56" width = "100%" height = "1" fill = "#ECEEF4" />
        <rect y = "280" width = "100%" height = "1" fill = "#ECEEF4" />
        <rect y = "224" width = "100%" height = "1" fill = "#ECEEF4" />
        <rect y = "168" width = "100%" height = "1" fill = "#ECEEF4" />
        <rect y = "392" width = "100%" height = "1" fill = "#ECEEF4" />
        <text
          fill = "#8B90A0"
          x = "50%"
          y = "50%"
          dominant-baseline = "middle"
          text-anchor = "middle"
        >
          Drop it here or add a file
        </text>
      </svg>
    </div>
  </body>
</html>

Я использую это фото (raw.githubusercontent.com/huyct1996/images/…) при сворачивании экрана пропадают слова «Перетащите сюда…», есть ли способ для изображений SVG вместо этого изменить в зависимости от того, когда они реагируют? Спасибо !!

Huy Nguyen 17.12.2020 19:48

хм. Хорошо, позвольте мне сначала проверить ваши изображения :) Мой друг !!! Вы знаете, какие кодеры классные... Просто юмор...

Imran Rafiq Rather 17.12.2020 19:50

Ты действительно добрый человек

Huy Nguyen 17.12.2020 19:56

О, Боже ! Это ваша доброта, видеть доброту в других. :) Хорошо, дело в нашем SVG-изображении в том, что если открыть код SVG, напрямую вставив ссылку raw.githubusercontent.com/huyct1996/images/… в браузере и нажав CTRL + SHIFT+I, ТОГДА у svg есть проблемы. Вы можете изменить это :)

Imran Rafiq Rather 17.12.2020 20:07

Я нашел решение вопроса, спасибо за вашу помощь и полезный вклад для меня и других.

Huy Nguyen 17.12.2020 20:10

Очень красиво, приятель. Пожалуйста. Счастливого кодинга :)

Imran Rafiq Rather 17.12.2020 20:13
Ответ принят как подходящий

Обновите файл svg, чтобы текст внутри него располагался по центру, а не переводился.

<svg width = "100%" height = "400" fill = "none" xmlns = "http://www.w3.org/2000/svg">
    <rect width = "100%" height = "1" fill = "#ECEEF4" />
    <rect y = "112" width = "100%" height = "1" fill = "#ECEEF4" />
    <rect y = "336" width = "100%" height = "1" fill = "#ECEEF4" />
    <rect y = "56" width = "100%" height = "1" fill = "#ECEEF4" />
    <rect y = "280" width = "100%" height = "1" fill = "#ECEEF4" />
    <rect y = "224" width = "100%" height = "1" fill = "#ECEEF4" />
    <rect y = "168" width = "100%" height = "1" fill = "#ECEEF4" />
    <rect y = "392" width = "100%" height = "1" fill = "#ECEEF4" />
    <text fill = "#8B90A0" x = "50%" y = "50%" dominant-baseline = "middle" text-anchor = "middle">Drop it here or add a file</text>
</svg>

Он не будет расширяться по вертикали. Атрибуты Y - это числа, а не проценты

Спасибо за вашу помощь, это было решением для меня

Huy Nguyen 17.12.2020 20:06

Другие вопросы по теме