Question

＆＃13;

 #nyanCat {
    content: url("billeder/nyan_cat.gif");
    display: table;
    margin: 0 auto;
    padding-top: 90px;
    height: 0 auto;
    max-width: 100%;
}
#gnome {
    content: url("billeder/gnome.gif");
    float: left;
    left: 10px;
    margin: 0 auto;
    display: inline;
    position: absolute;
    bottom: 0px;
    height: 0 auto;
    max-width: 100%;
}
#bernie {
    content: url("billeder/bernie.png");
    float: right;
    right: 10px;
    display: inline;
    position: absolute;
    bottom: 0px;
    height: 0 auto;
    max-width: 100%;
}
#doge {
    content: url("billeder/doge.png");
    float: right;
    position: absolute;
    top: 0px;
    transform: scaleY(-1);
    filter: FlipV;
    height: 0 auto;
    max-width: 100%;
}
#bodySnap {
    background-color: rgb(255, 0, 216);
}

@media screen and (max-width: 1700px), screen and (max-height:760px) {
#nyanCat {
    max-width: 50%;
}
#gnome {
    max-width: 70%;
}
#bernie {
    max-width: 70%;
}
#doge {
    max-width: 70%;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <link href="../snapStyle.css"   type="text/css" rel="stylesheet">
    <meta charset="utf-8">
    <title>Zacho's Snap</title>
</head>
<body id="bodySnap">
    <div>
        <img id="nyanCat" usemap="#map_nyan_cat" />
        <map name="map_nyan_cat" id="map_nyan_cat">
            <area href="http://www.nyan.cat/" target="_blank" shape="rect" coords="377,432,766,276" />
        </map>
    </div>
    <div>
        <img id="gnome" usemap="#map_gnome" />
        <map name="map_gnome" id="map_gnome">
            <area href="https://youtu.be/Gmf-TW5rWiY" target="_blank" shape="rect" coords="0,39,490,483" />
        </map>
    </div>
    <div>
        <img id="bernie" usemap="#map_bernie" />
        <map name="map_bernie" id="map_bernie">
            <area href="https://youtu.be/sjHSUPwHmjg" target="_blank" shape="rect" coords="51,6,391,479" />
        </map>
    </div>
    <div>
        <img id="doge" usemap="#map_doge" />
        <map name="map_doge" id="map_doge">
            <area href="http://knowyourmeme.com/memes/doge" target="_blank" shape="rect" coords="11,14,398,419" />
        </map>
    </div>
</body>

＆＃13;

他们都处于完美的位置，但我只是无法调整它们的大小！我试图让它适合所有屏幕分辨率

这就是我的页面在https://gyazo.com/bf59e0a9c2e64bbf09dfb77a133a4537

时的样子

为什么只有我的第一张图片会调整大小？

0 个答案: