Question

我有一个CMS（TYPO3），它目前输出普通的<img>标签。为了使其具有响应性，我想添加具有不同大小版本图像的srcset属性。

这引出了我们的问题：使用sizes属性，我可以告诉浏览器在选择图像版本时要假设的渲染大小。我可以绝对地给出渲染大小（px，em等）或视口宽度的百分比（在vw中）。但是我不能告诉浏览器假设图像的父宽度（%）。

如果我事先知道父宽度，我可以将它添加到sizes属性，如果由于响应式布局（如Bootstrap列）而导致父级大小发生变化，则需要使用某些媒体条件。

唉，我正在扩展CMS，无法控制布局或内容，例如：

页面容器宽度
列数
设计断点
列填充和装订线宽度
列中列的任何嵌套
任何其他填充

收集所有这些信息 - 只是为了找出父母的形象有多大 - 几乎是不可能的。

即使我不知道服务器端的最终图像渲染宽度（=父宽度）（px也不{{1} }}）？

虽然我更喜欢静态解决方案，但我也对基于JavaScript的想法持开放态度，因为它们可以优雅地回归。

修改：我的问题可归结为：是否有某种机制可以替换标准"to avoid confusion what it would be relative to"以内的vw？

修改：我目前的解决方案是基于JS的：

sizes="100%"

我不想依靠JS来做这件事。

Answer 1

两个选项：

使用srcset

您的用例正是srcset的设计目标。 <source>图片大小提前知道;容器尺寸在运行时已知;您可以像CSS @media查询一样定义像素范围，以告诉浏览器<source>使用哪个容器大小。

媒体查询是相对于视口而不是容器（与CSS媒体查询一样），因此您必须做一些数学运算来决定要将哪个图像用于容器的相对于容器的预期大小视。（我相信这种复杂性的原因是你可以根据screen density设置图像，但不要引用我。）

想法是相对于容器在外部设置图像的大小，然后使用srcset选择适合于该容器的图像，并根据视口大小选择预期的大小。

（StackOverflow的代码片段让人难以看清，因为它将样本绘制在一个固定大小的帧内;你可以看到的最多的是当你调整div的大小时图像源不会改变，这可能不是＆＃39有史以来最引人注目的演示。要尝试调整视口大小，您需要将代码复制到新窗口中）。

＆＃13;

.container {
  border: 1px solid;
  width: 50%;
  height: 150px;
  resize: horizontal;
  overflow:auto;
}

＆＃13;

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

＆＃13;

浏览器支持目前是incomplete（IE和Edge一如既往地是罪魁祸首），但polyfills存在。

使用背景图像

...可以使用媒体查询进行更改。

@media screen and (min-width: 501px) {
  .container {
    background-image: url('big.jpg');
  }
}
@media screen and (max-width: 500px) {
  .container {
    background-image: url('small.jpg');
  }
}

这是普遍支持的，但要求您的CMS能够与HTML一起生成CSS规则。

图像渲染大小与屏幕宽度相关时的响应图像未知

1 个答案:

使用srcset

使用背景图像