2013-08-30 69 views
2

我试图做似乎容易,但正在消耗我的能量loooot。 我有这个example here,当我悬停img时,它只显示我Div和Canvas。 问题是,我怎样才能使这三件事情反应?DIV与画布和图像响应

继承人的我HTML,风格内部

<div class="map maphilighted" style="display: block; background: url(" 
logocultura.png 
") repeat scroll 0% 0% transparent; position: relative; padding: 0px; width: 720px; height: 305px;"> 
    <canvas style="width: 720px; height: 305px; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none; opacity: 1;" 
    height="305" width="720"></canvas> 
    <img class="map maphilighted" width="720" height="305" usemap="#usa" 
    src="logocultura.png" style="opacity: 0; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none;"></img> 
</div> 
+0

第一个响应式设计将避免使用像素,并使用百分比值.. –

+0

@prasannaAarthi是的,和我tryed到所有像素更改为%,与计算,以避免分歧。我想这个问题来了,因为这个画布(由%地图)不强制%。 – fiskolin

回答

0

如果你想让它反应灵敏,你应该宽度属性更改为一个比例。 试试这个:

<div class="map maphilighted" style="display: block; background: url("http://www.gloper.org/highplay.pt/images/cultura/logocultura.png") repeat scroll 0% 0% transparent; position: relative; padding: 0px; width: 100%; height: auto;"> 
<canvas style="width: 100%; height: auto; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none; opacity: 1;" height="305" width="720"></canvas> 
<img class="map maphilighted" width="720" height="305" usemap="#usa" src="/highplay.pt/images/cultura/logocultura.png" style="opacity: 0; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none;"></img> 
</div> 
+0

不起作用。我试图做出反应的是这个[链接](http://www.gloper.org/highplay.pt/quem-somos/cultura),它很适合1920年的宽屏幕,但它在小屏幕上太大了。 – fiskolin

+0

然后使用媒体查询。如果你希望图像显示为小于400px或更小,请在你的css文件中进行:@media(width-max:400px){.maphilighted {width:50%; }} – Manolo