0

我希望创建一个响应迅速但也可扩展的图像。我需要在 HTML/CSS 中完成这一切，并使用 Javascript 或 JQuery 使其可扩展。我可以制作可扩展单元或响应式图像 - 但很难将两者结合起来。可以使用一些例子或指导。

因此，示例场景是，在初始页面加载时，整个页面有 924x70（即响应式）。如果您单击该单元，它会扩展为 924x250（该单元也需要响应） - 这甚至可能吗？

提前致谢！

4

1 回答 1

0

您可以通过媒体查询使用响应式设计来控制初始图像大小。然后使用jquery调整点击大小。

这是一个使用鼠标悬停更改图像大小的基本示例。调整窗口大小将触发媒体查询，但您需要在鼠标悬停之前执行此操作。根据您的需要调整这个基本示例应该是一项直接的任务。

基本的html

<img src="theImage" />

媒体查询

@media screen and (max-width:300px){    
    img{width:200px;}
}

jquery 看演示

希望这可以帮助...

于 2013-08-01T04:07:42.463 回答