CSS 在响应式设计中更改 img src？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10439382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change img src in responsive designs?
提问by jonas
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".
如果不是这样，我可能会选择“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?
加载图像作为背景 - 感觉有点脏。
插入两个版本并切换css显示属性 - 非常肮脏！
编写一个设置所有 img 链接的 javascript – 感觉有点矫枉过正？
Anyone sitting on a good solution? :)
任何人都坐在一个好的解决方案上？:)
采纳答案by ryanve
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 JSwhich will change the srcon the fly for you. Try this:
如果它只是一些图像（并且它们经过优化），那么通过 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" alt="example">
Read this articletoo.
也请阅读这篇文章。
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">
回答by Maximiliano Catani
Other option. Not need scripts, only CSS.
其他选择。不需要脚本，只需要 CSS。
HTML
HTML
<div id="mydiv">
<img src="picture.png" class="image_full">
<img src="picture_mobile.png" class="image_mobile">
</div>
CSS
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;
}
}
回答by Anrijs Vītoli??
Most of todays browsers are supportingpicturetag.
So you can use it to change images depending on viewport width.
今天的大多数浏览器都支持picture标签。因此，您可以使用它根据视口宽度更改图像。
<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>
回答by trante
I'm the fan of 3rd choice, because it doesn't make to load multiple images and saves bandwidth.
我是第三个选择的粉丝，因为它不会加载多个图像并节省带宽。
Because of mobile-first design, first I load small images like this:
由于移动优先设计，我首先加载这样的小图像：
<div id="mydiv">
<img src="myphoto1_normal.jpeg" width="24" height="24" alt="myphoto1"/>
<img src="myphoto2_normal.jpeg" width="24" height="24" alt="myphoto2"/>
</div>
Then after document load I run this script:
然后在文档加载后我运行这个脚本：
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);
});
}
If screen width is big then I change small images to bigger ones with this script. It runs fast on desktop computers. And it isn't run in smartphones.
如果屏幕宽度很大，那么我使用这个脚本将小图像更改为更大的图像。它在台式计算机上运行速度很快。它不在智能手机中运行。
回答by Roko C. Buljan
What I would do is:
use images as background of each lielement
create a sprite with the links (images) in all sizes:
我会做的是：
使用图像作为每个li元素的背景
创建一个带有各种尺寸的链接（图像）的精灵：
___ ___ ___ ___
__ __ __ __
_ _ _ _
Than, using @media e.g:.
比，使用@media 例如：。
@media only screen and (max-width : 480px) {
/* here I would make my li smaller */
/* here I would just change the li background position*/
}
The images 'sprite' will be already loaded in the browser and the transition will happen really smooth and fast.
图像“精灵”将已经加载到浏览器中，并且过渡将非常平滑和快速地发生。
