问题标签 [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.
.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
元素,服务器不会受到调整图像大小的请求的轰炸,而是提供现有照片以节省处理和时间?
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 文本,这似乎与双重下载一样糟糕或更糟。
css - 视频嵌入和图像在一行中的高度相等
我有两个 50% 宽度的 div。一个是简单的图像,另一个是 YouTube 嵌入。
我想要实现的是两个元素(图像和视频)的高度相同。我需要这在响应式上同样有效。
我试图使用http://embedresponsively.com/ css 进行视频嵌入,但无法理解如何使其正常工作。
这是我想做的:
这是我的jsfiddle:
javascript - 调整浏览器大小时如何使用 jQuery 重新加载“srcset”图像?
这个问题是这里问题的变体:如果调整浏览器窗口大小,是否可以重新计算使用的 `srcset` 图像?
基本上我的网站使用带有多个图像的动态滑块,我只能使用saya.class img
而不是ID来定位图像。此外,还有多个带有该 a.class 的 img 需要修改。
当浏览器窗口调整大小时,如何使用 jQuery 或常规 javascript 让浏览器更新到新的 srcset?最好只在窗口调整大小超过几个触发点时才这样做,例如在宽度点 1170px 和 1000px 处。
换句话说,有没有办法使用 jQuery 让 srcset 像艺术指导一样运作?我无法改用该<picture>
元素或替代品。
所以每个图像都用以下代码包装:
(此代码在多个方面重复)
谢谢您的帮助!
html - 使用浮动图像创建特定的响应式布局
我一直在尝试为某些图像创建特定的布局。我想创建的布局。
我已经尝试浮动较小的图像,以便它们与大图像并排,如果我添加一个 clearfix,这会起作用,但由于某种原因,我应用于图像的宽度不再有效。所以它要么是正确定位的大图像,要么是整个地方的小图像。
我尝试将所有图像放入单独的 div 标签,然后放入父 div,然后浮动,但这有它自己的问题。
这可以在 HTML 和 CSS 中完成,还是我需要走 jQuery 路线?
我将整理代码,我只是想把它放在我的脑海中。
HTML:
CSS:
https://jsfiddle.net/apdeng/wyvzmm9q/1/
提前致谢。
html - 如何使图像居中?
我在这个问题上挣扎了一段时间。我的风景图像看起来很棒,但我无法让我的纵向图像正确对齐。这是我拥有的代码,自动边距和填充似乎根本没有效果,图像将始终与滑块(父元素)的左侧对齐。
html-email - 如何将视网膜图像添加到响应式电子邮件
标志图像翻倍并缩小为具有设置像素宽度和高度的较小尺寸。我想要图像更干净而不是模糊。徽标在外观上仍然是原始大小。
我是否需要将其包装在自己的表格中以设置像素宽度?我需要为它设置一个特定的类吗?如何清理此代码以更有效地工作?
样式 - 徽标没有类别....
html - 带有图像的响应式 div
我在水平放置的 div 中有 3 张图像。当我调整页面大小时,图像会改变它们的位置并以垂直对齐方式浮动。我希望页面响应,当我调整页面大小时,我希望整个 div 都被调整和调整大小。我还需要将其他 div 与其他图像一起放入页面。我希望图像在底部对齐。Sameone 帮帮我好吗?这是代码示例。
强文本
php - 无法在图像容器中制作白色背景
我需要帮助在边框内制作白色以及黑色描述。
实际场景位于:http: //buyersstop.blogspot.in/2016/01/motoe.html
我的问题是,如果我应用白色背景颜色,图像周围会显示黑色边框。
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 = 默认渲染图像长度