How can I make sure that the image does not move when scaling?

C

CoCoCoder2019-10-16 19:52:50

css

CoCoCoder, 2019-10-16 19:52:50

In general, the crux of the matter. I make an interactive picture using SVG, everything would be fine, it looks cool, it works cool, BUT! When scaling, everything moves out. Even if you make the position of the element as a percentage (bad!). Help, how to fix this situation?
The code:

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

(Yes, the image was initially skewed, but this is due to scaling from the side of the image hosting, on which I uploaded it so that you can see what could be the reason)

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

Rustam Bainazarov, 2019-10-16
@CoCoCoder

By the way, it's generally not very true to do SVG markup like you do. Corrected.
Well, so, add this, if you don’t want to change the markup, then it will work:

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

This is generally a typical style reset for img. And it is precisely because of its absence that you have this problem.