У меня есть следующий фрагмент кода, с которым я работаю. Я не мог заставить свое изображение 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
Любая помощь будет высоко оценена. Спасибо
Просто используйте width:100%; height:100%
в CSS. Это заставит SVG
занять все пространство div
.
<div class = "img">
<img style = "width:100%; height: 100%;" src = "img.svg" alt = "image">
</div>
Спасибо за помощь, я пытался, но содержимое в svg "перетащите сюда" не изменяет размер с помощью div
@HuyNguyễn что это?
Когда я добавляю "style = " width: 100%; высота: 100%; "на это все еще не работает, вы идете в codepen, чтобы помочь мне? Большое спасибо
@HuyNguyễn Эй, Нгуен, ты прав. Я пробовал, но высота не 500 пикселей, а больше. 544px. Покажи нам. Если я могу найти что-то
@ImranRafiqRather Спасибо, я новичок, поэтому с нетерпением жду вашей помощи.
Нет проблем, дорогой друг. Я посмотрю, что с этим делать. И, надеюсь, придумать решение... ИншаАллах :) Кажется, у вас есть обновленный код. дайте-ка подумать
Ваша проблема решена уважаемый. Попробуйте мой ответ. Это будет работать во всех сценариях :) Теперь счастлив. Примите мой ответ для других разработчиков. Также оцените моего друга. И если вам нужна какая-либо другая помощь, дайте мне знать :)
Также отредактировали ваш вопрос для лучшей читабельности. Наслаждайтесь кодированием, дорогой. Нужна помощь, дайте мне знать :) До свидания
Ваша проблема решена с помощью 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 вместо этого изменить в зависимости от того, когда они реагируют? Спасибо !!
хм. Хорошо, позвольте мне сначала проверить ваши изображения :) Мой друг !!! Вы знаете, какие кодеры классные... Просто юмор...
Ты действительно добрый человек
О, Боже ! Это ваша доброта, видеть доброту в других. :) Хорошо, дело в нашем SVG-изображении в том, что если открыть код SVG, напрямую вставив ссылку raw.githubusercontent.com/huyct1996/images/… в браузере и нажав CTRL + SHIFT+I, ТОГДА у svg есть проблемы. Вы можете изменить это :)
Я нашел решение вопроса, спасибо за вашу помощь и полезный вклад для меня и других.
Очень красиво, приятель. Пожалуйста. Счастливого кодинга :)
Обновите файл 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 - это числа, а не проценты
Спасибо за вашу помощь, это было решением для меня
Пожалуйста, включите сюда код, с которым у вас возникли проблемы, и особенности проблемы, с которой вы столкнулись.