javascript - 响应图像二重奏

Question

我会尽量把我的问题说清楚。

我的目标是用 hmtl 和 js 做一个移动界面，带有映射按钮，我有一个背景，中间有一个手机，以及要放入手机的界面图像。我需要的是它具有响应性，并使界面保留在后台的手机中，该界面也具有响应性。

如果有人能帮我匹配这两张响应式图片就太好了。

#container {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: rgba(0, 0, 0, 0);
  background-image: url("http://slpubmedias.tf1.fr/test_nocache/test_jf/POIcall/Background.jpg");
  background-origin: padding-box;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;
  height: 1080px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  padding-bottom: 10%;
  padding-left: 38.7%;
  padding-right: 38.7%;
  padding-top: 9%;
  position: relative;
  width: 100%;
}
#Interface {
  width: 22.2%;
  position: absolute;
  z-index: 2;
}
#appel {
  top: 50%;
  left: 50%;
  z-index: 6;
  margin-left: -80px;
  margin-top: -35px;
  visibility: hidden;
}
#fondtel {
  top: 50%;
  left: 50%;
  z-index: 4;
  margin-left: -90.5px;
  margin-top: -50px;
  visibility: hidden;
}
#video {
  top: 50%;
  left: 50%;
  z-index: 4;
  margin-left: -91px;
  margin-top: -193.5px;
  visibility: hidden;
}
#message {
  width: 22.2%;
  visibility: hidden;
  z-index: 3;
  position: absolute;
}
#Background {
  width: 100%;
  height: 100%;
  max-width: 100%;
  z-index: 1;
  display: none;
}

<div style='background: transparent url("http://slpubmedias.tf1.fr/test_nocache/test_jf/POIcall/Background.jpg") no-repeat scroll 0% 0% / 100% auto; width: 100%; height: 1080px; margin: 0px auto; box-sizing: border-box; padding: 9% 38.7% 10%; position: relative;'
id="container">
  <MAP NAME="menu">

    <AREA id="Bouton1" SHAPE="rect" COORDS="29,216,63,239" HREF="#">
    <AREA id="Bouton2" SHAPE="rect" COORDS="67,216,128,239" HREF="#">
    <AREA SHAPE="rect" COORDS="29,216,148,177" HREF="">
    <AREA SHAPE="rect" COORDS="29,216,148,177" HREF="">
    <AREA SHAPE="rect" COORDS="29,216,148,177" HREF="">
    <AREA SHAPE="rect" COORDS="29,216,148,177" HREF="">
    <AREA SHAPE="rect" COORDS="29,216,148,177" HREF="">
    <AREA SHAPE="rect" COORDS="29,216,148,177" HREF="">
    <AREA SHAPE="rect" COORDS="29,216,148,177" HREF="">
  </MAP>

  <video id="video" webkit-playsinline="" preload="auto" src="untitled_files/cyclamed.mp4" style="position:absolute; width:181px;height:191px;"></video>
  <img src="untitled_files/fondtel.jpg" id="fondtel" style="position:absolute;">
  <img onclick="playAndHideOverlay(this)" style="position:absolute;" id="appel" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/POIcall/appel.jpg">
  <img src="http://slpubmedias.tf1.fr/test_nocache/test_jf/POIcall/Interface.jpg" id="Interface" usemap="#menu" style="" border="0">
  <img src="http://slpubmedias.tf1.fr/test_nocache/test_jf/POIcall/spam.jpg" id="message" style="margin: 0px;">
  <img src="" id="Background">

</div>

Answer 1

可以在img标签中添加class="img-responsive"

<img src="640x960.jpg" id="Interface" class="img-responsive" BORDER="0" USEMAP="#menu" style="position:absolute;">
<img src="Background.jpg" id="Background" >