在响应式设计中更改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屋！
