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

Question

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

Код html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>31three</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript">
        (function() {
            var preload = document.getElementById("preloader");
            var loading = 0;
            var id = setInterval(frame, 64);

        function frame() {
            if (loading == 100) {
        clearInterval(id);
            } else {
            loading = loading + 1;
            if (loading == 90) {
          preload.style.opacity = "0";
        }
      }
    }
  })();
    </script>

</head>
<body>

    <!--img id="logo" src="pictures/logo.png"-->
    <img id="one" src="pictures/one.jpg">
    <img id="two" src="pictures/two.jpg">
    <img id="three" src="pictures/three.jpg">

</body>
</html>

Код css

body {
    margin: 0;
    padding: 0;
    background-color: white;
}

#logo {
    position: relative;
    margin-left: 50%;
}

#one {
    position: relative;
    margin-top: 106px;
    width: 1519px;
    height: 800px;
}

#two {
    position: relative;
    width: 1519px;
    height: 217px;
    margin-top: -3.8px;
}

#three {
    position: relative;
    width: 1519px;
    margin-top: -3.8px;
    margin-bottom: -3px;
}

Картинки, на которых показано, как всё выглядит

На первой картинке обычный масштаб 100% На второй картинке изменённый масштаб 33%

БЛОГ НА HUSL

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

Ответы (0 шт):