Question

我会尽量让我的问题清楚。

我的目标是在hmtl和js中进行移动界面，使用Mapping按钮，我的背景中间有一部手机，以及要放入手机的界面图像。我需要的是它能够快速响应，并使界面保持在背景的手机中，这也是响应性的。

如果有人可以帮助我匹配这两个响应式图像，那就太棒了。

#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" >

Answer 2

我删除了ID为背景的图片代码，并将其添加到 #container 作为背景图片。

＆＃13;

#container {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
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: 100vh;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
max-height: 1080px;
max-width: 2000px;
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
{
visibility:hidden;
z-index:3;
}

#Background
{
width:100%;
height:100%;
max-width:100%;
z-index:1;
  display:none;
}

＆＃13;

<div style='' id="container">
  <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/640x960.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>

＆＃13;

响应式图像二重奏

2 个答案: