标签: responsive-images

我有一个很好的背景SVG图像来自inkscape,标志着从一个文本部分到下一个文本部分的过渡.我希望该背景图像向上或向下缩放到文本部分的整个宽度.出于响应性的原因,该大小取决于浏览器宽度.但是,我希望背景图像的固定高度为20px.

什么行不通:

1. background-size: cover; 这对我不起作用,因为它会在右边切掉图像而不是缩小图像,好吧.
2. background-size: contain 这对我不起作用,因为它总是会同时在x和y方向上缩小图像.因此,图像始终保持其原始xy比率,好吧.
3. 结合封面和包含由于语法原因这是不可能的,好的.
4. cover 或者contain 这不起作用,即使我本来期望的.我用PNG尝试了它并且它有效.但是使用SVG,正确调整宽度,然后调整高度,使图像保持原始的比例,我不希望这样.但是,我希望使用SVG,因为它是一个相对简单的图像,我希望它在所有设备上的最佳分辨率,包括非常大的屏幕,而不使用巨大的PNG图像.
5. 由于问题似乎是SV​​G特定的,我在文本编辑器中打开SVG并将标签中的属性和值插入background-size: 100% 20px;.因为它仍然无法工作,我也尝试删除SVG标记中的宽度和高度以及viewBox规范.没有成功.

我在试图环绕使用我的头的过程srcset和sizes上img标签.

虽然我认为我掌握了基础知识 - 主要归功于这篇文章 - 我在实际应用sizes属性方面苦苦挣扎.

在我可以找到的所有示例中,事物都被大量简化,并且size属性被声明为好像在每个断点处,图像宽度将是视口宽度的精确比例,允许使用vm单位.例如:

sizes="(min-width: 36rem) 33.3vw,
       100vw"

当然,在现实生活中,图像通常位于其他容器内,这些容器本身可能位于其他容器内等等,每个容器都有自己的边距,填充或定位.

可以公平地说除了最简单的情况(当图像具有流体宽度并且不仅仅是视口的精确百分比时),calc必须使用,可能会在html标记中添加可怕的复杂计算,因为图像尺寸需要计算从视口宽度,向下通过任何容器到图像？例如,如何计算位于具有7px填充的容器的图像的正确大小,该容器本身位于容器的45%容器内,其容量为15px,位于侧边栏内,占主页容器的25% 15px的填充,最小宽度为1220px？

sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)),
       100vw"

试图在sizes属性中计算这个似乎很荒谬,特别是考虑到所有这些都可能在每个断点处发生变化.必须保持这个大规模复杂的计算与CSS的变化同步似乎是疯狂的.然后你有了补丁的浏览器支持calc.

我觉得我错过了一些明显的东西,但它是什么？

注意:我知道Alexander Farkas优秀的Lazy Sizes,它通过使用data属性为您进行大小计算,但我对标准用法感兴趣.

这个问题实际上与编码无关,而是为任务选择正确的方法.我不知道它是否违反了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元素,服务器不会受到调整图像大小的请求的轰炸,但是可以节省处理和时间的现有照片吗？

如果我们使用srcset和sizes属性，将src属性指定为后备仍然很有用。同样，我想如果指定了width和height属性，旧浏览器也会利用它们。但是现代浏览器呢？

例如：

<img
   src="foo100x100.jpg"
   srcset="foo100x100.jpg 100w, foo500x500.jpg 500w, foo900x900 900w"
   sizes="100vw"
   width="100"
   height="100"
   alt="example"
>

在这个例子中，现代浏览器的width和height属性是否有用？

我想知道我的首页是否可以加载专供移动用户使用的图像。我知道使用 javascript 是可能的，但我想知道是否可以仅使用 CSS 来实现相同的效果。我试图做一些研究，但找不到我要找的东西。我的意思不是根据屏幕大小调整图像大小，而是加载适合移动设备的图像。

我一直在试图让这个网站,我要建,只是在我以为它会很好,我看它的iPad的视网膜屏幕上的工作响应的图像辛勤工作,它选择了错误的图像.它不仅尺寸错误,而且还显示为风景,而不是肖像.我不知道它为什么这样做,因为我已经为所有不同的屏幕尺寸创建了自定义图像尺寸,并且还创建了用于视网膜屏幕的XL版本.

这是带有srcset和大小的图像的HTML.

<img class="scene_element scene_element--fadeinup" src="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg" 
srcset="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017.jpg 3684w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-768x1151.jpg 768w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1010x1514.jpg 1010w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg 505w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-415x622.jpg 415w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-720x1080.jpg 720w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-360x540.jpg 360w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-293x440.jpg 293w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1110x800.jpg 1110w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-455x306.jpg 455w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-355x238.jpg 355w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-640x600.jpg 640w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-320x300.jpg 320w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-2340x1258.jpg 2340w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1170x629.jpg 1170w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-940x627.jpg 940w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-555x400.jpg 555w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1910x1274.jpg 1910w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-955x637.jpg 955w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1574x1250.jpg 1574w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-787x625.jpg 787w" 


sizes="(-webkit-min-device-pixel-ratio: 1.5) 1010px, 
(max-width: 767px) 767px, (min-width: 768px) and (max-width: 991px) 415px, 
(min-width: 992px) and (max-width: 1199px) 415px, 
(min-width:1200px) 505px, 505px" itemprop="thumbnail" alt="Image description" >

由于视网膜屏幕是双像素我首先尝试将其添加到目标iPad的尺寸,但没有发生任何事情:

(min-width: 2048px) 1010px 

有趣的是我有一个尺寸为1010像素的图像,并且在尺寸中指定当它是使用此图像的像素的两倍时.相反,它使用这个尺寸:940x627.jpg

谁能解释为什么会这样呢？

我已经研究 CSS 有一段时间了，但是srcset图像sizes元素让我感到困惑。这是一个我认为可行的例子。

<img alt="Background image flowers"
    srcset="img/flowers-480.jpg 480w,
            img/flowers-480@2x.jpg 480w 2x,
            img/flowers-768.jpg 768w,
            img/flowers-768@2x.jpg 768w 2x,
            img/flowers-960.jpg 960w,
            img/flowers-960@2x.jpg 960w 2x,
            img/flowers-1280.jpg 1280w,
            img/flowers-1280@2x.jpg 1280w 2x" 
    sizes="(max-width: 1279px) 100vw,
           (min-width: 1280) 1280px"
    src="img/flowers-960.jpg">

这个想法是让图像占视口的 100%，直到视口宽度达到 1280 像素或更宽，然后图像将是固定大小。但是，为了补偿更高 DPI 的设备，我认为建议添加 DPI 描述符（1.5x、2x 等），如此处和此处的建议。

我认为上面的代码会做的是：

• 检查尺寸，查看图像的预期尺寸（如果给出了相对单位，例如 % 或 vw，则计算像素宽度）
• 查找 srcset 宽度中最接近该宽度的图像
• 从这些图像中，过滤掉 DPI 描述符最接近设备 DPI 的图像

但是，当我将其通过验证器时，我收到以下错误：

错误：元素 img 上的属性 srcset 值错误：图像宽度img/flowers-480@2x.jpg与图像宽度相同 img/flowers-480.jpg

很明显，我完全忽略了 srcset 和 size 的工作原理。我究竟做错了什么？

我似乎无法辨别使用picture元素还是仅将img元素与srcset属性之间的功能或含义上的区别。我了解他们的工作方式；我只是不完全理解为什么或何时选择一个。

看起来imgelement是更轻便，更简洁的代码，但这意味着和做相同的事情吗？我在代码中使用它来提供同一图像的不同缩放版本：

<img src="default.jpg" 
srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w" 
sizes="(max-width: 800px) 100vw, 12em" 
alt="something" />

就提供正确的缩放图像而言，它确实可以满足我的要求，并且似乎可以在Chrome，Firefox，Edge和Opera中运行。

我知道可以使用以下代码完成相同的操作：

<picture>
<source srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w" 
media="(max-width: 800px)" 
sizes="100vw" />
<source srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w" 
media="(min-width: 800px)" 
sizes="12em" />
<img src="default.jpg" alt="something" />
</picture>

那么，功能上有什么区别？为什么我要使用更多的代码来做基本上相同的事情？

有语义上的区别吗？那会是什么？

来自w3.orgimg：

一个img元素表示的图像和它的后备内容。

同样来自w3.orgpicture：

该picture元素是一个容器，它为其包含的img元素提供多个源，以允许作者基于屏幕像素密度，视口大小，图像格式和其他因素，以声明方式控制或提示要使用的图像资源。 。它代表它的孩子。

如果srcset属性已经对该img元素执行此操作，为什么我们需要一个picture元素作为容器？我想念什么？语义上有区别吗？

我在此处阅读了另一篇文章 …

林试图找出如何延迟加载card-columns有card-img-top，例如：

<div class="card-columns">
    <div class="card text-center">
        <img class="card-img-top lazy" src="img/foo.jpg" alt="foo" />
        <div class="card-body">
            <!-- more code -->
        </div>
    </div>
</div>

我的研究

搜索标签bootstrap-4和bootstrap，我发现“如何一张一张地为 Bootstrap 4 卡片设置动画？ ”但这是针对卡片上没有图像加载的动画。

“ Bootstrap-carousel lazy loader ”适用于 Bootstrap 3。

在 Bootstrap 的文档中搜索我能够返回的唯一加载结果是Spinners。

在标签bootstrap-4下进一步搜索，我能够找到“ Bootstrap carousel Images not shows ”，但这集中在轮播而不是卡片上。

想偷懒负载后lazyload使用配方响应图像我省略了data-srcset＆data-sizes：

<div class="card-columns">
    <div class="card text-center">
        <img class="card-img-top lazy" src="img/foo.jpg" alt="foo" />
        <div class="card-body">
            <!-- …

在 Angular 15.1.x 项目中，我尝试使用 NgOptimizedImage 实现一个在移动和桌面上响应的图像。强制的 img 宽度和高度属性将覆盖尺寸属性。

<img ngSrc="image.png" width="617" height="505" sizes="(max-width: 768px) 276w, 317w">。

根据文档，这应该意味着如果视口 768 像素或更小的图像宽度应显示 276 像素宽，否则显示 317 像素。我按照文档使用宽度/高度的内在函数。无论宽度/高度属性是多少（617 像素 X 505 像素），图像始终显示。

本质上我正在尝试实现这一目标，但使用 ngSrc：

<img src="image.png" srcset="img.png 617w" sizes="(max-width: 768px) 276px, 317px" >