在响应式设计中更改img src? [英] Change img src in responsive designs?
问题描述
我要编写一个响应式布局,它可能包含三种不同的状态。
古怪的部分是大部分文本,例如菜单项目将是图像 - 不是我的想法,我不能改变,我害怕。
因为每个州的图像会略有不同,除了大小(对于例如,在最小的状态下,菜单变为浮动按钮而不是常规标题),我将需要切换图像而不是仅缩放相同的图像。
如果它不是'为此我可能会选择adaptive-images.com。
所以,我需要一些关于最佳实践解决方案的输入。
我能想到的是:
-
将图像作为背景加载 - 感觉是有点肮脏。
-
插入两个版本并切换css显示属性 - 非常肮脏!
- <写一个设置所有img链接的javascript - 感觉有点矫枉过正?
任何人都能找到一个好的解决方案吗? :)
如果它只是一些图像(并且它们已经过优化),那么通过CSS隐藏它们就没问题了。如果它很多,那么请看一下 Response JS ,这将改变 src
为您提供动态。试试这个:
< body data-responsejs ='{create:[
{prop: width,breakpoints:[0,320,481,641,961,1025,1281]}
]}'>
< img src =small.pngdata-min-width-481 =medium.pngalt =example>
阅读这篇文章。
更新 - 额外的例子:
< body data-responsejs ='{create:[
{prop:width, 断点:[0,320,481,641,961,1025,1281]}
,{prop:device-pixel-ratio,breakpoints:[0,1,1.5,2 ]}
]}'>
< img src =small.pngdata-device-pixel-ratio-1.5 =medium.pngalt =example>
I'm about to code a responsive layout which will probably contain three different "states".
The quirky part is that much of the text, for example menu items will be images – not my idea and that's nothing i can change i'm afraid.
Since the images will differ slightly, other than size, for each state (for example in the smallest state the menu becomes floating buttons instead of a regular header), i will need to switch images instead of just scaling the same ones.
If it weren't for that i'd probably go with "adaptive-images.com".
So, i need some input on a best practice solution for this.
What i could think of:
Loading the images as backgrounds – feels a little bit filthy.
Insert both versions and toggle css display property – very filthy!
Write a javascript that sets all img links – feels a bit overkill?
Anyone sitting on a good solution? :)
If it's just a few images (and they are optimized) then hiding them via CSS is no problem. If it's a lot then take a look at Response JS which will change the src
on the fly for you. Try this:
<body data-responsejs='{ "create": [
{ "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
]}'>
<img src="small.png" data-min-width-481="medium.png" alt="example">
Read this article too.
Update - extra example:
<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" alt="example">
这篇关于在响应式设计中更改img src?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!