[英]Responsive images when image rendering size in relation to screen width is unknown
I have a CMS (TYPO3) which currently outputs plain <img>
tags.我有一个 CMS (TYPO3),它当前输出普通的
<img>
标签。 To make it responsive, I want to add srcset
attributes with different size versions of the image.为了使其具有响应性,我想添加具有不同大小版本的图像的
srcset
属性。
Which leads us to the problem: With the sizes
attribute, I can tell the browser what rendering size to assume when choosing the image version.这导致了我们的问题:通过
sizes
属性,我可以告诉浏览器在选择图像版本时要假设的渲染大小。 I can give the rendering size absolutely (in px
, em
, etc.) or as a percentage of viewport width (in vw
).我可以绝对(以
px
、 em
等为单位)或视口宽度的百分比(以vw
)给出渲染大小。 However I cannot tell the browser to assume the image will have its parent's width (in %
).但是我不能告诉浏览器假设图像将具有其父级的宽度(以
%
)。
If I knew the parent width beforehand, I could just add it to the sizes
attribute, if need be with some media conditions if the parent size changes due to a responsive layout (like Bootstrap columns).如果我事先知道父宽度,我可以将它添加到
sizes
属性,如果父尺寸因响应式布局(如 Bootstrap 列)而发生变化,则需要使用某些媒体条件。
Alas, I'm extending a CMS and have no control over layout or content, like:唉,我正在扩展一个 CMS 并且无法控制布局或内容,例如:
Collecting all this information - just to find out how big the image parent is going to be - is next to impossible.收集所有这些信息——只是为了找出图像父级有多大——几乎是不可能的。
Any ideas on how I can get a responsive image that delivers the ideal size even though I don't know the final image rendering width (=parent width) at server side (neither in px
nor vw
)?即使我不知道服务器端的最终图像渲染宽度(=父宽度)(既不是
px
也不是vw
),关于如何获得可提供理想尺寸的响应式图像的任何想法?
Though I prefer static solutions, I'm also open to JavaScript based ideas, given they fallback gracefully.虽然我更喜欢静态解决方案,但我也愿意接受基于 JavaScript 的想法,因为它们可以优雅地回退。
Edit : My question boils down to: is there some mechanism that can replace the sizes="100%"
which is not in the standard "to avoid confusion what it would be relative to" ?编辑:我的问题归结为:是否有一些机制可以替换标准中没有的
sizes="100%"
, “以避免混淆它相对于什么” ?
Edit : My current solution is JS-based:编辑:我目前的解决方案是基于 JS 的:
// this, plus some code to prevent image loading before this is executed
$('img[srcset]').each(function() {
$(this).attr('sizes', $(this).parent().width() + 'px');
})
I would like to not have to rely on JS to do this.我想不必依赖 JS 来做到这一点。
Two options:两种选择:
Your use case is exactly what srcset
was designed for.您的用例正是
srcset
设计目的。 The <source>
image sizes are known ahead of time; <source>
图像大小是提前知道的; the container size is known at run time;容器大小在运行时已知; you define pixel ranges exactly like CSS
@media
queries to tell the browser which <source>
to use for a given container size.您可以像 CSS
@media
查询一样定义像素范围,以告诉浏览器将哪个<source>
用于给定的容器大小。
The media query is relative to the viewport, not the container (as with CSS media queries) so you do have to do some math to decide which image you want to use for a container's expected size relative to that viewport.媒体查询相对于视口,而不是容器(与 CSS 媒体查询一样),因此您必须进行一些数学运算来决定要使用哪个图像用于容器相对于该视口的预期大小。 (I believe the reason for this complexity is so you can set images depending on screen density as well, but don't quote me on that.)
(我相信这种复杂性的原因是你也可以根据屏幕密度设置图像,但不要引用我的话。)
The idea is to set the size of the image externally, relative to a container, then use srcset to select an image appropriate for that container's expected size given that viewport size.这个想法是在外部设置图像的大小,相对于容器,然后使用 srcset 选择适合该容器的预期大小的图像给定视口大小。
(StackOverflow's code snippet makes this difficult to see because it draws the sample inside a fixed-size frame; the most you can see is the image source not changing when you resize the div, which maybe isn't the most compelling demo ever. To try out the viewport resize you'll need to copy the code into a new window). (StackOverflow 的代码片段使这很难看,因为它在固定大小的框架内绘制样本;你能看到的最多的是当你调整 div 大小时图像源没有改变,这可能不是有史以来最引人注目的演示。到尝试调整视口大小,您需要将代码复制到新窗口中)。
.container { border: 1px solid; width: 50%; height: 150px; resize: horizontal; overflow:auto; }
<div class="container" resizable> <picture> <source media="(max-width: 100px)" srcset="http://via.placeholder.com/100x150"> <source media="(max-width: 200px)" srcset="http://via.placeholder.com/200x150"> <source media="(max-width: 300px)" srcset="http://via.placeholder.com/300x150"> <source media="(max-width: 400px)" srcset="http://via.placeholder.com/400x150"> <source media="(max-width: 500px)" srcset="http://via.placeholder.com/500x150"> <source media="(max-width: 600px)" srcset="http://via.placeholder.com/600x150"> <source media="(max-width: 700px)" srcset="http://via.placeholder.com/700x150"> <source media="(max-width: 800px)" srcset="http://via.placeholder.com/800x150"> <img src="http://via.placeholder.com/10x10" width="100%"> </picture> </div>
Browser support is currently incomplete (IE and Edge are, as usual, the culprits) but polyfills exist.浏览器支持目前不完整(IE 和 Edge 通常是罪魁祸首)但存在polyfill 。
...which can be changed using media queries. ...可以使用媒体查询进行更改。
@media screen and (min-width: 501px) {
.container {
background-image: url('big.jpg');
}
}
@media screen and (max-width: 500px) {
.container {
background-image: url('small.jpg');
}
}
This is universally supported, but requires that your CMS be able to generate CSS rules along with the HTML.这是普遍支持的,但要求您的 CMS 能够与 HTML 一起生成 CSS 规则。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.