当窗口尺寸变小时如何更改src或多张图像
我想知道当用户更改浏览器窗口的大小或使用IPAD时如何更改多个图像的来源?
I was wondering how to change the source of multiple images when the user changes the size of the browser window or they are using an IPAD?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以使用 CSS 媒体查询,通过纯 CSS 来完成此操作。如果您在某些块元素上使用背景图像,而不是使用
元素作为图像,您可以通过添加/删除类(基于媒体查询 -以及可用的客户区域)到他们的公共容器。
You can do this with pure CSS, using CSS media queries. Instead of using
<img>
elements for your images, if you use background images on some block elements, you can easily swap their dimensions and background images by adding/removing classes (based on media queries -- and hence available client area) to their common container.如果用户调整浏览器大小,图像已经加载,因此无需加载较小的版本。
如果他们使用较小的设备,例如 ipad 或 iphone,您可以检测到并重定向到另一个页面,其中图像的大小适合该设备,例如 ipad.example.com、m.example.com 等。
Well if the user resizes the browser, the images are already loaded so there is no need to load a smaller version.
If they are using a smaller device eg ipad or iphone you can detect that and redirect to a different page where the images are the correct size for that device, eg ipad.example.com, m.example.com, etc.
您可以使用 css3 媒体查询来执行此操作。查看这篇文章 精彩杂志
You do this with css3 media queries. Check out this article on smashing magazine