响应式图像/横幅，也可扩展，用 HTML/CSS/Javascript 或 w Jquery 编写答案

【问题标题】：Responsive image/banner that is also expandable written in HTML/CSS/Javascript or w Jquery响应式图像/横幅，也可扩展，用 HTML/CSS/Javascript 或 w Jquery 编写
【发布时间】：2013-08-01 12:07:42
【问题描述】：

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

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

提前致谢！

【问题讨论】：

我认为您在这里缺少的关键是如何计算纵横比。一旦你弄清楚了，你就可以制定一个公式。
可能 - 这样的解决方案是否可行：matthewjamestaylor.com/blog/responsive-banner-ads 然后通过 iframe 调用所有这些操作？
我不确定我是否理解对 iFrame 的需求，但这是一个肯定会帮助您朝着正确方向前进的解决方案。
img { width: 100%; height: auto }
是的，可能不需要 iframe - 我已经尝试了几个解决方案 - 但我仍然有点迷茫 - 我认为你关于理解计算比率的建议会有所帮助 - 但我不需要不太明白 -

标签： javascript jquery html css responsive-design

【解决方案1】：

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

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

基本的html

<img src="theImage" />

媒体查询

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

jquery 见demo

希望这会有所帮助...

【讨论】：