我有一个CMS(TYPO3),目前输出普通的
这就带来了问题:使用
如果我事先知道父元素的宽度,我可以将其添加到
可惜,我正在扩展一个CMS,无法控制布局或内容,例如:
- 页面容器宽度 - 列数 - 设计断点 - 列填充和间距宽度 - 任何列嵌套在列内 - 任何其他填充
收集所有这些信息 - 仅仅为了找出图像父级有多大 - 几乎是不可能的。
有没有想法,如何获得响应式图像,即使我在服务器端不知道最终图像渲染宽度(父宽度)(无论是以
尽管我更喜欢静态解决方案,但我也愿意接受基于JavaScript的想法,只要它们具有良好的回退机制。 编辑:我的问题归结为:是否有一些机制可以替换
我希望不必依赖JS来完成这个任务。
<img>
标签。为了使其响应式,我想添加不同大小版本的图像的srcset
属性。这就带来了问题:使用
sizes
属性,我可以告诉浏览器在选择图像版本时要假定什么渲染尺寸。我可以绝对地给出渲染尺寸(以px
、em
等形式)或作为视口宽度的百分比(以vw
形式)。但是我不能告诉浏览器假定图像将具有其父元素的宽度(以%
形式)。如果我事先知道父元素的宽度,我可以将其添加到
sizes
属性中,如果需要,在父元素大小由于响应式布局(如Bootstrap列)而更改时,可以加入一些媒体条件。可惜,我正在扩展一个CMS,无法控制布局或内容,例如:
- 页面容器宽度 - 列数 - 设计断点 - 列填充和间距宽度 - 任何列嵌套在列内 - 任何其他填充
收集所有这些信息 - 仅仅为了找出图像父级有多大 - 几乎是不可能的。
有没有想法,如何获得响应式图像,即使我在服务器端不知道最终图像渲染宽度(父宽度)(无论是以
px
还是vw
为单位)也能提供理想大小?尽管我更喜欢静态解决方案,但我也愿意接受基于JavaScript的想法,只要它们具有良好的回退机制。 编辑:我的问题归结为:是否有一些机制可以替换
sizes="100%"
,而这并不是标准的"为避免混淆,它将相对于什么"?
编辑:
我的当前解决方案是基于JS的:// this, plus some code to prevent image loading before this is executed
$('img[srcset]').each(function() {
$(this).attr('sizes', $(this).parent().width() + 'px');
})
我希望不必依赖JS来完成这个任务。
width:100%
)的问题,而且我所说的“静态”只是指“没有 JavaScript”。我想要得到一个适合的图像版本(不太大也不太小)。但是,只有当我知道我的图像将有多大,无论是以px
还是vw
为单位时,才能使用sizes
。 - Jostapx
和vw
单位还在哪些地方发挥作用呢? - Rafael