问题标签 [responsive-images]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
276 浏览

.net - 响应式图像:调整大小还是动态裁剪?

这个问题实际上不是关于编码,而是为任务选择正确的方法。我不知道这是否违反了 SO 的规则,但你去吧..

我曾经为一家当地报纸构建了一个小型 CMS,它为他们提供了添加帖子和照片的功能。关于照片,他们过去常常上传一张照片,我保存了该照片的各种版本,以根据他们可能选择的不同模板(模板而不是屏幕尺寸!)

现在,我被要求更新这个旧系统,我面临着响应/适应的困境。

就我在网上的发现而言,下一件大事是<picture>元素。我找到了很多资源,就在我决定去的时候,我来到了这个网站。如果您查看任何图像的来源,您会发现它有一个查询字符串,例如width=940&height=320&mode=crop&scale=both&meta=panoramic当我调整窗口大小时,它变成了width=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenter我相信这个网站正在使用Image Resizer并且根据屏幕尺寸,正在处理一张照片由服务器即时输出新图像。

我不明白的是,这些方法中的哪一种实际上更好,因为 picture元素仍然需要将多张图片上传到服务器,而 imageresizer 只需要一张,它会裁剪调整适合屏幕尺寸的一张。但另一方面,使用该picture元素,服务器不会受到调整图像大小的请求的轰炸,而是提供现有照片以节省处理和时间?

0 投票
0 回答
58 浏览

javascript - 在picturefill.js 呈现正确图像之前临时显示的替代文本

我正在尝试设置 picturefill.js 以提供响应式图像。当我使用 srcset 属性而不是 src 属性来避免双重下载时,默认图像 alt 文本始终显示在 picturefill.js 有机会呈现正确的图像之前。

我只是想知道这是否是一个已知问题以及是否有解决方法。我测试过的 3 台设备中只有 1 台不完全支持图片元素(如果我使用 src 属性,它们会获得双重下载)不显示带有 srcset 属性的 alt 文本;即,我的快速 iPhone 6;我较慢的 iPhone 4 和 iPad 1 显示 alt 文本,我只是想知道是否只是设备的速度让它看起来好像没有显示。

我看到人们谈论的关于使用picturefill.js 的唯一真正的缺点是省略了src 属性以避免双重下载,将那些没有javascript 的图像保留为默认图像替代文本——与临时无关。在脚本完成时渲染 alt 文本,这似乎与双重下载一样糟糕或更糟。

0 投票
1 回答
1290 浏览

css - 视频嵌入和图像在一行中的高度相等

我有两个 50% 宽度的 div。一个是简单的图像,另一个是 YouTube 嵌入。

我想要实现的是两个元素(图像和视频)的高度相同。我需要这在响应式上同样有效。

我试图使用http://embedresponsively.com/ css 进行视频嵌入,但无法理解如何使其正常工作。

这是我想做的:

在此处输入图像描述

这是我的jsfiddle:

https://jsfiddle.net/ujddekdf/

0 投票
1 回答
1156 浏览

javascript - 调整浏览器大小时如何使用 jQuery 重新加载“srcset”图像?

这个问题是这里问题的变体:如果调整浏览器窗口大小,是否可以重新计算使用的 `srcset` 图像?

基本上我的网站使用带有多个图像的动态滑块,我只能使用saya.class img而不是ID来定位图像。此外,还有多个带有该 a.class 的 img 需要修改。

当浏览器窗口调整大小时,如何使用 jQuery 或常规 javascript 让浏览器更新到新的 srcset?最好只在窗口调整大小超过几个触发点时才这样做,例如在宽度点 1170px 和 1000px 处。

换句话说,有没有办法使用 jQuery 让 srcset 像艺术指导一样运作?我无法改用该<picture>元素或替代品。

所以每个图像都用以下代码包装:

(此代码在多个方面重复)

谢谢您的帮助!

0 投票
1 回答
128 浏览

html - 使用浮动图像创建特定的响应式布局

我一直在尝试为某些图像创建特定的布局。我想创建的布局。

我已经尝试浮动较小的图像,以便它们与大图像并排,如果我添加一个 clearfix,这会起作用,但由于某种原因,我应用于图像的宽度不再有效。所以它要么是正确定位的大图像,要么是整个地方的小图像。

我尝试将所有图像放入单独的 div 标签,然后放入父 div,然后浮动,但这有它自己的问题。

这可以在 HTML 和 CSS 中完成,还是我需要走 jQuery 路线?

我将整理代码,我只是想把它放在我的脑海中。

HTML:

CSS:

https://jsfiddle.net/apdeng/wyvzmm9q/1/

提前致谢。

0 投票
1 回答
63 浏览

html - 如何使图像居中?

我在这个问题上挣扎了一段时间。我的风景图像看起来很棒,但我无法让我的纵向图像正确对齐。这是我拥有的代码,自动边距和填充似乎根本没有效果,图像将始终与滑块(父元素)的左侧对齐。

0 投票
1 回答
952 浏览

html-email - 如何将视网膜图像添加到响应式电子邮件

标志图像翻倍并缩小为具有设置像素宽度和高度的较小尺寸。我想要图像更干净而不是模糊。徽标在外观上仍然是原始大小。

我是否需要将其包装在自己的表格中以设置像素宽度?我需要为它设置一个特定的类吗?如何清理此代码以更有效地工作?

样式 - 徽标没有类别....

0 投票
1 回答
51 浏览

html - 带有图像的响应式 div

我在水平放置的 div 中有 3 张图像。当我调整页面大小时,图像会改变它们的位置并以垂直对齐方式浮动。我希望页面响应,当我调整页面大小时,我希望整个 div 都被调整和调整大小。我还需要将其他 div 与其他图像一起放入页面。我希望图像在底部对齐。Sameone 帮帮我好吗?这是代码示例。

强文本

0 投票
2 回答
51 浏览

php - 无法在图像容器中制作白色背景

我需要帮助在边框内制作白色以及黑色描述。

实际场景位于:http: //buyersstop.blogspot.in/2016/01/motoe.html

我的问题是,如果我应用白色背景颜色,图像周围会显示黑色边框。

0 投票
3 回答
1002 浏览

html - calc(.333 * (100vw - 12em)) 是什么意思?

有人可以向我解释calc(.333 * (100vw - 12em))以下 HTML 行中的含义吗?特别是 .333 值;那是从哪里来的?

取自http://ericportis.com/posts/2014/srcset-sizes/

长度可以是各种各样的东西!长度可以是绝对的(例如 99px,16em)或相对的(33.3vw,如我们的示例)。您会注意到,与我们的示例不同,有许多布局结合了绝对单位和相对单位。这就是令人惊讶的良好支持的 calc() 函数的用武之地。假设我们在 3 列布局中添加了一个 12em 侧边栏。我们会像这样调整我们的尺寸属性:

我明白这一点:

  • (最小宽度:36em)=媒体查询
  • calc(.333 * (100vw - 12em)) = 渲染图像大小
  • 100vw = 默认渲染图像长度