DIV与画布和图像响应

我试图做似乎容易，但正在消耗我的能量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>

来源

2013-08-30 fiskolin

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

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

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

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

来源

2013-08-30 10:22:07 Manolo

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

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

DIV与画布和图像响应

回答

相关问题