Как изменить размер карты изображения с помощью png, оставаясь выровненным?

Недавно я сделал веб-портфолио, и я пытаюсь сделать так, чтобы мой png-файл использовал карту изображения, используя этот изображение-карта-ресайз. Но когда я пытаюсь изменить размер окна, карта не остается выровненной с png. Карта изображения должна подчеркивать определенные части png при наведении курсора. Как я могу заставить эти два оставаться выровненными?

Я пытался возиться с некоторыми атрибутами, которые у меня есть в моем файле css, но пока ничего не сработало.

HTML

<html>
<head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "user-scalable=yes, width=device-width, initial-scale=1">
    <meta name = "apple-mobile-web-app-capable" content = "yes">
    <title>Salvador Lopez Jr.</title>
    <link rel = "stylesheet" type = "text/css" href = "portfolio.css">
    <link rel = "icon" href = "images/favicon2.ico">
</head>
<body id = "body" onload = "scrollLock()">

<div class = "flipContainer">
    <div class = "flipper" id = "flip">
        <div class = "front face">
            <img src = "images/card_front.png" width = "630px" alt = "BusinessCardFront" class = "center shadow" usemap = "#navmap"/>
            <map name = "navmap">
                <div id = "undA" onclick = "flipToBack(this.id)"><area shape = "rect" coords = "1480,3255,2330,3480"></div>
                <div id = "undW" onclick = "flipToBack(this.id)"><area shape = "rect" coords = "3144,3255,3860,3480"></div>
                <div id = "undC" onclick = "flipToBack(this.id)"><area shape = "rect" coords = "4614,3255,5740,3480"></div>
            </map>
        </div>
        <div class = "back face">
            <img src = "images/card_back2.png" width = "630px" alt = "BusinessCardBack" class = "center shadow" id = "scale"/>
            <div id = "flipArrow"><img style = "cursor:pointer" src = "images/flip_arrow.png" width = "21px" alt = "ReturnArrow"/></div>
        </div>
    </div>
</div>

<script src = "jquery-3.3.1.js"></script>
<script type = "text/javascript" src = "imageMapResizer.min.js"></script>
<script src = "portfolio.js"></script>

</body>
</html>

CSS

body {
    background-color:#f5f5f5;
    font-family:'Garamond','EB Garamond',
        'Baskerville', 'Baskerville Old Face',
        'Hoefler Text', 'Times New Roman',
        'serif';
    font-size:20px;
    overflow-x:hidden;
    min-width:100%;
    position:relative;
}

section {
    position:relative;
    margin:auto;
    height:100px;
    opacity:0;
    text-align:justify;
    line-height:1.4;
    visibility:hidden;
}

img {
    max-width:100%;
}

#undA {
    position:absolute;
    top:24.1vw;
    left:-14.5vw;
    margin-left:50%;
    width:0;
    height:0.04vw;
    background:black;
    -webkit-transition:0.3s;
    transition:0.3s;
}

#undW {
    position:absolute;
    top:24.1vw;
    left:-3.05vw;
    margin-left:50%;
    width:0;
    height:0.04vw;
    background:black;
    -webkit-transition:0.3s;
    transition:0.3s;
}

#undC {
    position:absolute;
    top:24.1vw;
    left:6.9vw;
    margin-left:50%;
    width:0;
    height:0.04vw;
    background:black;
    -webkit-transition:0.3s;
    transition:0.3s;
}

#undA:hover {
    width:5.28vw;
}

#undW:hover {
    width:4.5vw;
}

#undC:hover {
    width:7.31vw;
}

jquery html css

29.03.2019 00:26

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Ответы 1

Если вы используете бутстрап, просто добавьте класс к своему изображению class = "img-responsive", если вы этого не сделаете, вы можете добавить код CSS width:100%. Если вы уже сделали это и у вас не получилось, добавьте !important в конец кода CSS.

Я не использую бутстрап. Могу ли я добавить width:100% к атрибутам png? И будет ли !important стоять отдельно, как на пустой строке?

— 29.03.2019 00:43

нет, если ваш код width:100% находится в формате html, !important не нужен. Но если вы собираетесь добавить в css, вы должны написать width:100% !important; . Это сделает ваш код CSS более важным, чем другие ваши коды CSS.

— 30.03.2019 00:51

Код не дает желаемых результатов. Это делает png больше, чем хотелось бы.

— 30.03.2019 18:29

Чем не используйте его на 100%, сделайте его на 50% или как вам больше нравится. Если вы поделитесь своим кодом, я могу быть более полезным. [ссылка] getbootstrap.com/docs/3.4/examples/grid/[/ссылка] Посмотрите на эту страницу для использования начальной загрузки.

— 01.04.2019 22:39

Я обновил код тем, что, по моему мнению, поможет лучше понять проблему. И ссылка отправляет меня на страницу 404.

— 02.04.2019 06:43

29.03.2019 00:33