Question

我对如何保持我的图像映射位置感到有点迷茫。看起来如果它改为移动或ipad，它就会丢失它的地图并且链接消失了。

我确实已经阅读了有关为其设置媒体查询的内容，但是，我们使用的这个模板已预设为可扩展，因此我不确定我需要做什么。

CSS：

@media only screen and (max-width: 620px)
 {
      [id=topMessageWrapper] img {
        height: auto !important;
        max-width: 100%;
        width: auto;
      }
      [id=topMessageWrapper],
      [id=topMessageWrapperMainTable] {
        width: 100% !important;
        table-layout: fixed;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
  }@media only screen and (max-width: 450px) {
      [id=topMessageWrapper] {
        padding: 0 10px;
      }
      td[class=responsiveColumn] {
        width: 100% !important;
        height: auto !important;
        display:block;
        padding: 0;
        clear:both;
        height:auto;
      }
  }

图片的HTML：

<div style="background-color:#66cccc"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="word-wrap: break-word; table-layout: fixed;"><tbody>
            <tr>
               <td style="color: #66cccc; display:block;"><p><a href="happy little link" target="_blank"><img src="mapimage.jpg" width="600" height="780" usemap="#Map" border="0"/></a></p>
                </td> 
               </tr>
             </tbody>
          </table></div>

从我所看到的，＆＃39; topMessageWraperMainTable＆＃39;是整个容器和责任柱＆＃39;是图像的实际位置。在那里，图像设置为600x780尺寸。

图像映射在缩放时发生变化

0 个答案: