html - 不同分辨率对齐

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;
}

我曾尝试删除 height: 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%;
}