srcset渲染错误大小的图像
我正在尝试根据设备宽度提供响应/自适应图像。
原始图像：
<img src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"/>
与Srcset：
<img
src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
srcset="
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400 400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800 800w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
"
/>
我面临两个问题：
1）即使在较小的设备上（如iPhone 6s），也会加载宽度为2000px的图像（它应该加载800px图像）。
2）我已经把两个图像（有和没有srcset）放在一起。它们都加载了具有相同维度的图像。然而，与其他版本相比，带有srcset的版本显得较小。因为html/css中没有指定宽度，所以它应该以实际图像的宽度呈现，对吗？小提琴在这里：https://jsfiddle.net/hfcbatdn/
共有1个答案
使用srcset属性时，必须提供大小属性生成响应图像。像这样改变。
<img
src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
srcset="
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400 400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800 800w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
"
/>
到
<img
src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
srcset="
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400 400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800 800w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
"
sizes="(max-width: 991px) 480px,(max-width: 1024px) 800px,(max-width: 1920px) 1400px,(max-width: 2560px) 2000px,3800px"
/>
更改大小属性最大宽度=？您的愿望@media查询。您还必须在
更多的细节在响应图像。
-
我正在使用具有响应图像的引导。我想通过向浏览器提供多种图像大小来优化加载时间。根据本文，使用srcset这样的简单方法有助于让浏览器选择最佳图像大小： 我的问题是，将其与引导img响应类相结合，即使只需要一张小图片，也会加载一张大图片。 代码示例：Bootply。使用Chrome进行测试，它内置支持srcset支持！其他一些浏览器需要picturefill.js才能识别它。） 如果您复制图像的源（
-
问题内容： 我正在使用Preact（出于所有意图和目的，React）来渲染保存在状态数组中的项目列表。每个项目旁边都有一个删除按钮。我的问题是：单击该按钮时，将删除正确的项目（我已对此进行了几次验证），但是重新渲染项目时缺少 最后一个 项目，并且删除的项目仍然存在。我的代码（简体）： 我究竟做错了什么？我是否需要以某种方式主动重新渲染？这是n + 1种情况吗？ 澄清 ：我的问题不在于国家的同步性。
-
Blade 内部内置了一个非常简单的模板渲染引擎，如果你有一些简单的页面需要渲染可以试试它（生产环境不适用）。 渲染一个模板需要遵守一条准则： 所有的模板文件都存储在 resources/templates 目录下 你可以调用 Response 方法的 render 方法渲染或者返回一个 String 类型的视图路径。 @GetRoute("/index") public void renderI
-
因为新版的控制器可以无需继承任何的基础类，因此在控制器中如何使用视图取决于你怎么定义控制器。 模板渲染 渲染模板最常用的是控制器类在继承系统控制器基类（\think\Controller）后调用fetch方法，调用格式： fetch('[模板文件]'[,'模板变量（数组）']) 模板文件的写法支持下面几种： 用法 描述 不带任何参数 自动定位当前操作的模板文件 [模块@][控制器/][操作] 常用
-
问题内容： 我正在为我的第一个深度Pyglet项目开发2D Minecraft克隆，但遇到了一个问题。每当我在屏幕上有相当数量的块时，帧速率都会急剧下降。 这是我的渲染方法：我使用字典，键为元组（代表块的坐标），项为纹理。 我遍历整个字典并渲染每个块： PS sx和sy是屏幕滚动的坐标偏移 我想知道是否有一种方法可以更有效地渲染每个块。 问题答案： 我将尽力解释为什么以及如何在不真正了解代码外观的
-
如果你想渲染内置错误页面，你可以使用next/error： import React from 'react' import Error from 'next/error' import fetch from 'isomorphic-unfetch' export default class Page extends React.Component { static async getIni