@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%;
}

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



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


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

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

Войти через центр авторизации
Похожие вопросы
22 нояб. 2019, в 15:41
2500 руб./за проект
22 нояб. 2019, в 15:32
3000 руб./за проект
22 нояб. 2019, в 13:46
3000 руб./за проект