正文 

当前位置： 首页 > 源码 >

在响应式设计中更改 img src？

     2023-03-06     291

关键词：

【中文标题】在响应式设计中更改 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。

HTML

<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>

【讨论】：

如何在视图 MVC 中更改 img src

】如何在视图MVC中更改imgsrc【英文标题】：HowtochangeimgsrcinviewMVC【发布时间】：2017-04-0903:59:46【问题描述】：这是我的图片：<imgid="1star"src="~/Content/Images/emptystar.png"onmouseover="setStars(1)"onmouseout="setStarsBack()"onclick="location.href=\' 查看详情

如何在响应式中更改 HTML 布局？

】如何在响应式中更改HTML布局？【英文标题】：HowcanichangeHTMLlayoutinresponsive?【发布时间】：2021-10-1004:48:16【问题描述】：我想在桌面和响应模式下实现以下结构。如何在响应模式下更改html的布局？<divclass="headergridpy-3"><div... 查看详情

在 CSS 中悬停时更改 img src SVG [重复]

】在CSS中悬停时更改imgsrcSVG[重复]【英文标题】：ChangeimgsrcSVGonhoverinCSS[duplicate]【发布时间】：2020-12-2012:31:46【问题描述】：html:&lt;imgsrc="logo.svg"alt="Logo"class="logo-img"&gt;css:.logo-imgpath:hoverfi 查看详情

我应该使用媒体查询进行响应式设计吗？

】我应该使用媒体查询进行响应式设计吗？【英文标题】：shouldiusemediaqueriesforresponsivedesignwithreact?【发布时间】：2019-10-2800:48:54【问题描述】：我想使用react制作一个响应式网站，我应该使用媒体查询来更改布局并将移动设备中... 查看详情

如何在响应式设计中禁用缩放功能？

】如何在响应式设计中禁用缩放功能？【英文标题】：Howtodisablezoomingcapabilitiesinresponsivedesign?【发布时间】：2012-11-0403:12:55【问题描述】：如何在使用iPad、iPhone和/或其他智能手机时禁用响应式设计页面中的放大和缩小功能。有... 查看详情

在 DOM 中移动元素以实现响应式 Web 设计

】在DOM中移动元素以实现响应式Web设计【英文标题】：MovingElementsinDOMforResponsiveWebDesign【发布时间】：2014-06-0722:54:00【问题描述】：简要说明我创建了一个响应式网站，它实际上具有三个视图（桌面、平板电脑、移动）。大多数... 查看详情

响应式设计不适用于 wordpress

】响应式设计不适用于wordpress【英文标题】：Responsivedesigndoesn\'tworkonwordpress【发布时间】：2012-05-1102:48:55【问题描述】：我正在创建具有基于twitter引导程序的响应式布局的WP主题。您可以在panel.daweb.cz上看到该网站，一切正常..... 查看详情

响应式 img srcset 不在横向模式下缩放

】响应式imgsrcset不在横向模式下缩放【英文标题】：Responsiveimgsrcsetnotscalinginlandscapemode【发布时间】：2017-03-1116:28:27【问题描述】：我最近构建了以下website。该网站在所有图片上都使用了imgsrcset。在调试过程中，我发现在主页上... 查看详情

在 chrome 响应式模拟器中重定向更改用户代理

】在chrome响应式模拟器中重定向更改用户代理【英文标题】：Redirectinchromeresponsivesimulatorchanginguseragent【发布时间】：2021-12-1619:29:09【问题描述】：当我在chrome响应式模拟器中向返回302重定向的页面发出请求时，我看到一个带有... 查看详情

响应式设计的现状与趋势

...12年开始到2014年，各大家对Web设计的趋势预测中，都提到响应式设计；2015年网页设计趋势预测中，响应式仍在继续。这个经历了几年依然大热的响应式，在过去的几年里，快速巩固了自己的地位，并掀起了一股网页设计新标准... 查看详情

如何更改响应式表单中日期的格式？

】如何更改响应式表单中日期的格式？【英文标题】：HowtochangetheformatofDateinReactiveForms?【发布时间】：2021-09-0503:59:09【问题描述】：我想更改我在响应式表单中的一个字段中的默认日期格式。它以以下格式显示“16-03-1999”，但... 查看详情

更改 img src SVG 颜色 [重复]

】更改imgsrcSVG颜色[重复]【英文标题】：ChangeimgsrcSVGcolor[duplicate]【发布时间】：2019-06-3014:09:42【问题描述】：这里我正在尝试更改图像svg颜色。<button><imgsrc="someImage.svg"></button>是否可以在Angular5中更改按钮中svg图像... 查看详情

如何让这个表单和按钮在响应式设计中正确调整大小？

】如何让这个表单和按钮在响应式设计中正确调整大小？【英文标题】：HowcanIgetthisformandbuttontoresizecorrectlyinaresponsivedesign?【发布时间】：2012-05-2509:01:16【问题描述】：我正在尝试创建一个自定义小部件，其中包括带有文本输入... 查看详情

在响应式设计中移动最左侧的列

】在响应式设计中移动最左侧的列【英文标题】：Moveleft-mostcolumninaresponsivedesign【发布时间】：2012-02-0907:11:05【问题描述】：我正在重新设计我的大学报纸的网站，并让该设计很好地适应iPad。我现在正尝试将其切换为单列布局（... 查看详情

在 img.src 更改后强制 firefox 重新加载图像

】在img.src更改后强制firefox重新加载图像【英文标题】：Forcefirefoxtoreloadimageafterimg.srcchange【发布时间】：2012-08-0208:15:31【问题描述】：我正在修改画布上的一些图像，然后将这些图像的src设置为新的base64编码图片。img.src=changeColo... 查看详情

iPhone上引导响应式设计中的页面宽度

】iPhone上引导响应式设计中的页面宽度【英文标题】：pagewidthinbootstrapresponsivedesignoniphone【发布时间】：2012-10-2723:16:56【问题描述】：我的引导响应式设计在各种浏览器上运行良好，但页面宽度在iPhone上受到限制。我已经添加了... 查看详情

在响应式设计中使用带有显示属性的“表格”和“表格单元”？

】在响应式设计中使用带有显示属性的“表格”和“表格单元”？【英文标题】：Using\'table\'and\'table-cell\'withdisplaypropertyinresponsivedesign?【发布时间】：2013-01-3017:25:03【问题描述】：我在容器上使用display:table;，在子元素上使用disp... 查看详情

在 Bootstrap 3 响应式设计中居中水平列表

】在Bootstrap3响应式设计中居中水平列表【英文标题】：CenteringaHorizontalListinaBootstrap3ResponsiveDesign【发布时间】：2014-05-1513:13:12【问题描述】：我尝试了很多方法，但似乎无法让两个页脚列表居中。诚然，我是一个初学者，可能会... 查看详情