在响应式设计中更改 img src？
Posted
技术标签:
【中文标题】在响应式设计中更改 img src？【英文标题】：Change img src in responsive designs? 【发布时间】：2012-05-13 10:34:16 【问题描述】：我即将编写一个可能包含三种不同“状态”的响应式布局。
奇怪的部分是大部分文本，例如菜单项将是图像 - 这不是我的想法，恐怕我无法改变。
由于每个状态的图像会略有不同，除了大小之外（例如，在最小状态下，菜单变成浮动按钮而不是常规标题），我需要切换图像而不是仅仅缩放相同的图像。
如果不是这样，我可能会选择“adaptive-images.com”。
所以，我需要一些关于最佳实践解决方案的意见。
我能想到的：
将图像加载为背景 - 感觉有点脏。
插入两个版本并切换 css 显示属性 - 非常肮脏！
编写一个设置所有 img 链接的 javascript - 感觉有点矫枉过正？
有人坐在一个好的解决方案上吗？ :)
【问题讨论】：
听起来像是CSS sprites 的工作？这样，您的所有“菜单项图像”都将包含在页面加载时加载的一张图像中。 如果图片是内容而不是 UI，制作精灵会很费力。 【参考方案1】：我会做的是：
使用图像作为每个 li 元素的背景
使用各种尺寸的链接（图像）创建一个精灵：
___ ___ ___ ___
__ __ __ __
_ _ _ _
然后，使用@media 例如:.
@media only screen and (max-width : 480px)
/* here I would make my li smaller */
/* here I would just change the li background position*/
图像'sprite'将已经加载到浏览器中，并且过渡会非常流畅和快速。
【讨论】：
谢谢，已经想过用css背景（有没有sprites），但是是不是感觉有点不对劲？这些图像大多与 UI 相关.. 我不明白你说的 UI 相关是什么意思。请解释。 （我知道图像将是导航按钮。） 这是个好主意，但是你如何处理大型精灵加载？我目前正在尝试加快响应式网站的速度。 请注意，使用“@media screen”设置的背景图像不会显示用于打印。【参考方案2】：如果只是几张图片（并且它们已经过优化），那么通过 CSS 隐藏它们是没有问题的。如果它很多，请查看Response JS，它将为您即时更改src。试试这个：
<body data-responsejs=' "create": [
"prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281]
]'>
<img src="small.png" data-min-width-481="medium.png" >
也阅读this article。
更新 - 额外示例：
<body data-responsejs=' "create": [
"prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281]
, "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2]
]'>
<img src="small.png" data-device-pixel-ratio-1.5="medium.png" >
【讨论】：
会去看看！他们很少对很多人感到舒服隐藏他们或做一个硬编码的javascript:) 这太棒了！谢谢！如果它只支持视网膜显示的替代图像，我会在天堂；） @jonas Cool =] 实际上device-pixel-ratio 有一种方法可以做到这一点（上面添加的示例）也可以使用自定义标准。请参阅自述文件（github.com/ryanve/response.js）中的Response.dpr 和Response.addTest 以及github.com/ryanve/response.js/wiki/… 上的一些更一般的示例，我喜欢使用width 或device-width 作为道具。【参考方案3】：
我是第三选择的粉丝，因为它不会加载多个图像并节省带宽。
由于移动优先的设计，我首先加载这样的小图像：
<div id="mydiv">
<img src="myphoto1_normal.jpeg" />
<img src="myphoto2_normal.jpeg" />
</div>
然后在文件加载后我运行这个脚本：
function resizeImages()
var width = window.innerWidth || document.documentElement.clientWidth;
$("#mydiv img").each(function()
var oldSrc = $(this).attr('src');
if (width >= 768)
var newSrc = oldSrc.replace('_normal.','_bigger.');
var newWidth = 100; var newHeight = 100;
else if ( width >= 480 )
var newSrc = oldSrc.replace('_normal.','_big.');
var newWidth = 50; var newHeight = 50;
$(this).attr('src',newSrc);
$(this).attr('width',newWidth);
$(this).attr('height',newHeight);
);
如果屏幕宽度很大，那么我会使用此脚本将小图像更改为更大的图像。它在台式计算机上运行速度很快。而且它不在智能手机中运行。
【讨论】：
【参考方案4】：其他选项。不需要脚本，只需要 CSS。
<div id="mydiv">
<img src="picture.png" class="image_full">
<img src="picture_mobile.png" class="image_mobile">
</div>
CSS
.image_full
display:block;
.image_mobile
display:none;
@media (max-width: 640px) and (min-width: 320px)
.image_full
display:none;
.image_mobile
display:block;
【讨论】：
它不会渲染完整的图像，但仍会将其加载到移动设备中，通常带宽有限。 优雅，在这个上卡了 1/2 小时！【参考方案5】：当今的大多数浏览器都有are supportingpicture 标签。
因此，您可以使用它来根据视口宽度更改图像。
<picture>
<source media="(min-width: 1200px)" srcset="/img/desktop-size.png">
<source media="(min-width: 768px)" srcset="/img/medium-size.png">
<img src="/img/mobile-size.png"/>
</picture>
【讨论】：
以上是关于在响应式设计中更改 img src？的主要内容，如果未能解决你的问题，请参考以下文章