使用不同的分辨率对齐

Question

我在图像上面对表格对齐的一些问题，我无法弄清楚哪个部分不正确。当使用下面的不同分辨率设备（笔记本电脑，电视）查看我的代码时，我的表格对齐完全超出预期。

#image_overlay_panel {
  width:100% !important;
  float: left;
}

#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/iameg/Acer_schematics.png');        
position: relative;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 808px;
 background-size: 100%;
}

#effTablehtml{
 position:absolute;
 top: 28%;
 left: 80%;
 color: black;
}

我试图去掉身高：808px;我的整个图像变得非常小，如下面的附件。介意分享我犯的错误。非常感谢你。

Answer 1

如果您希望图片能够响应所有屏幕，请尝试在代码中修复此规则

#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/iameg/Acer_schematics.png');       
position: relative;
 top: 0px;
 left: 0px;
 //width: 100%; <-- comment this line
 //height: 808px; <-- comment this line
 display: block;
 max-width: 100%;
 height: auto;
 background-size: 100%;
}

Answer 2

您可以根据您的要求使用媒体屏幕css

@media screen and (min-width: 480px) {
    body {
    }
}