@CoCoCoder
Новичок в веб-программировании,только учусь. :)

Как сделать так,чтобы картинка не съезжала при масштабировании?

В общем,суть вопроса. Делаю интерактивную картинку с помощью SVG,всё бы ничего,выглядит классно,работает клёво,НО! При масштабировании всё съезжает.Даже если делать положение элемента в процентах (бяда!).Помогите,как исправить эту ситуацию?
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Интерактивная карта</title>
	<meta name="description" content="">
	<meta name="keywords" content=" ">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/media.css">
	<link rel="stylesheet" href="css/fonts.css">
	<link rel = 'stylesheet' href = 'style.css'>
	<link rel="icon" type="image/x-icon" href="/images/favicon.ico">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

<body>
	<div class="map">
		<svg viewBox="0 0 1140 800">
			<a href="#">
				<path class="part" d="m 457.22244,98.885648 c 32.52252,66.957192 38.73863,153.400622 28.16442,252.281322 l 137.22665,-5.39319 c 5.33727,-80.01803 6.81847,-159.82184 -44.34398,-236.701 z" fill="#bf2523" description-data="<img src='media/2.jpg'> Реберная часть (толстый край) — первосортное мясо, в цельном виде состоит из 13 ребер">
				</a>

				<a href="#">
				<path class="part" d="m 578.26953,109.07278 c 44.33189,69.33986 54.25203,149.81293 44.34398,236.701 l 152.80698,-0.59924 C 772.7733,261.24635 769.87608,177.39629 717.29391,109.07278 Z" fill="#bf2523" description-data="<img src='media/1.jpg'> Филей (поясничная часть, тонкий край). Этот отруб содержит нежное и очень постное мясо.">
				</a>
			</svg>

			<div class="description">
				
			</div>

			<img src="https://s8.hostingkartinok.com/uploads/images/2019/10/667cca51ff79a7a05724107534ff1638.jpg" alt="">
		</div>


	<!--[if lt IE 9]>
	<script src="libs/html5shiv/es5-shim.min.js"></script>
	<script src="libs/html5shiv/html5shiv.min.js"></script>
	<script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
	<script src="libs/respond/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

.map {
	position:relative;
	text-align:center;
	top:0;
	left:0;
}
svg {
	position:absolute;
	left:0.3%;
	top:-0.3%;
	height:100%;
	width:100%;
}

(Да,там изначально изображение съехавшее,но это из-за масштабирования со стороны хостинга картинок,на который я залил это,чтобы вы могли посмотреть,в чём может быть причина)
  • Вопрос задан
  • 133 просмотра
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Кстати, это в целом не очень верно так делать разметку SVG, как у вас. Исправил.



Ну а так, это добавьте, если не хотите разметку менять, тогда заработает:
img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}


Это вообще типичный сброс стилей для img. И именно из-за его отсутствия у вас эта проблема.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
НТЦ РОСТ Москва
от 150 000 до 250 000 руб.
Flatstack Казань
от 60 000 до 90 000 руб.
Sveak Барнаул
от 50 000 руб.