时间戳

首页 > 解决方案 > 如何使用媒体查询更改图像地图坐标

html - 如何使用媒体查询更改图像地图坐标

问题描述

我有一个图像映射，并进行了媒体查询，以便图像以特定宽度变化。如何编写代码以便更改新图像的坐标？

HTML

<img src="../images/journey-final-01.jpg" alt="journey" usemap="#journeymap">
    <map id="map_ID" name="journeymap">
        <area target="" alt="flag1" title="Milestone 1" href="" coords="1356,644,1482,809" shape="rect">
        <area target="" alt="flag2" title="Milestone 2" href="" coords="808,595,900,710" shape="rect">
        <area target="" alt="flag3" title="Milestone 3" href="" coords="1361,320,1431,405" shape="rect">
        <area target="" alt="flag4" title="Milestone 4" href="" coords="1124,161,1190,248" shape="rect">
        <area target="" alt="cap" title="DDA" href="" coords="1173,110,1359,5" shape="rect">
    </map>

CSS

body img{
width: 100vw;
height: 100vh;
}

@media only screen and (max-width: 600px) {
    body img {
        content: url("../images/journey-mobile-01.jpg");
    }
}

标签： htmljquerycss

解决方案

推荐阅读