使用SRCSET以不同的屏幕尺寸问题显示两个图像
SRCSET是一种HTML属性，用于在不同屏幕尺寸下显示不同的图像。它可以帮助网页开发人员优化图像加载，提高用户体验。
SRCSET属性允许开发人员指定一系列图像和它们对应的屏幕尺寸描述符。浏览器会根据当前设备的屏幕尺寸选择最合适的图像进行加载，从而减少加载时间和带宽消耗。
使用SRCSET的优势包括：
- 提高网页加载速度：通过根据设备屏幕尺寸选择最佳图像，减少不必要的图像加载，从而加快网页加载速度。
- 提升用户体验：加载适合屏幕尺寸的图像可以确保图像在不同设备上显示清晰，提升用户体验。
- 节省带宽消耗：根据设备屏幕尺寸加载适当大小的图像，可以减少带宽消耗，特别是对于移动设备用户来说更为重要。
SRCSET的应用场景包括：
- 响应式网页设计：在响应式网页设计中，使用SRCSET可以根据不同设备的屏幕尺寸加载适合的图像，以适应不同的屏幕大小。
- 移动应用开发：在移动应用开发中，使用SRCSET可以根据不同设备的屏幕尺寸加载适合的图像，提供更好的用户体验。
- 多设备适配：在多设备适配的场景下，使用SRCSET可以根据不同设备的屏幕尺寸加载适合的图像，确保图像在各种设备上显示良好。
腾讯云相关产品中，可以使用COS（对象存储）来存储和管理图像资源。COS提供了高可用性、高可靠性的对象存储服务，可以满足图像存储的需求。您可以通过以下链接了解更多关于腾讯云COS的信息： https://cloud.tencent.com/product/cos
请注意，以上答案仅供参考，具体的产品选择和使用需根据实际需求和情况进行决策。
相关·内容
当我想在浏览器支持的情况下使用webp图像时，或者使用jpg时，我会这样使用：
<picture>
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Something">
</picture>
还要为屏幕尺寸选择合适的图像大小：
<picture>
<source media="(max-width: 799px)" srcs
浏览 25提问于2019-11-09得票数 0
1回答
Srcset不工作Firefox
、、、、
当浏览器达到特定的屏幕大小时，我试图使用srcset属性来交换图像。当屏幕尺寸超过768像素宽时，我需要桌面图像。
在不包括firefox的大多数浏览器中，我都能用下面的代码完成这一任务。我对“srcset”游戏非常陌生，所以我不确定我的端是否有语法错误。记住视网膜设备，有人知道我在这里错过了什么吗？浏览器对srcset的支持似乎足够了，所以我不确定是什么原因造成了这种情况。
<img class="desktop-hero" alt="" src="../img/hero_desktop.jpg" srcset="../img/h
浏览 1提问于2015-10-07得票数 1
回答已采纳
我想要两种尺寸的图像，分别用于大屏幕和小屏幕。对于fancybox，我使用srcset属性来更改全视图图像，如fancybox演示中所述，如下所示：
<a data-fancybox="test-srcset"
data-type="image"
href="img1200px.jpeg"
data-srcset="img1200px.jpeg 1200w,
img640px.jpeg 640w"
>
浏览 20提问于2019-02-03得票数 0
出于性能原因，我希望在桌面上使用大尺寸的图像，而在移动设备上使用小尺寸的图像作为我的旋转木马幻灯片。
我尝试了下面的代码，但只取得了有限的成功：
<picture>
<source srcset="images/s2.jpg" media="(min-width: 768px)">
<source srcset="images/s2m.jpg">
<img class="second-slide" srcset="images/s2m.jpg" alt=&
浏览 0提问于2017-01-10得票数 3
我根据宽度使用不同的img srcset。这是我的代码：
<img id="portadaImg" class="img-fluid"
srcset="images/portada/portada-xl.jpg 2400w,
images/portada/portada-l.jpg 1200w,
images/portada/portada-md.jpg 992w,
浏览 2提问于2018-04-11得票数 0
我在网上看过一些例子，但我相信我忽略了一些东西。当屏幕大小不同时，我有两个相似的图像需要渲染。一个是1440px屏幕尺寸的图像，另一个是375px屏幕尺寸的图像。现在，通过我的代码，我已经设置了初始源来渲染图像的“移动视图”，并将桌面视图图像的srcset设置为1440w。当我加载实时服务器时，它显示的是桌面图像，而不是移动视图的初始源。因此，它似乎是有效的，但遗漏了一步..任何提示都非常感谢！
<img
class="future__container--img"
src="./images/illustrati
浏览 13提问于2021-05-13得票数 0
3回答
调整srcset图像大小的正确方法是什么？例如，我有一个图像，是2000 x 1337。我把它调整到255 x 170。对于2x srcset，应该是：
510 x 340 (基于当前图像)
510 x 339 (基于原始图像)
编辑
为了澄清，我想知道srcset是如何工作的。例如，如果我对2x使用510 x 339图像(技术上更正确的基于原始的尺寸)，浏览器是否会“创建”一个510 x 340容器(当前尺寸x2)，然后调整510 x 339图像的大小以适应其中？
浏览 5提问于2016-06-20得票数 2
回答已采纳
我正在尝试掌握srcset，但我很难找到详细的参考资料。
据我所知，我可以这样做，为手机指定一个图像。
<img src="1.jpg" alt=""
srcset="1x300.jpg 300w"
sizes="(max-width: 480px) 300px">
然而，我不清楚如何指定为显示密度校正图像。
在上面的例子中，当屏幕宽度小于480px时，我已经指定使用300px的图像。然而，在2x视网膜显示屏上，我想要一个600px宽的图像，但屏幕尺寸仍然是480px。
如何为不同的像素密度指定另一个图像？
浏览 1提问于2016-02-05得票数 0
2回答
我正在尝试在小屏幕上显示特定的图像，而在较大的屏幕上显示不同的图像。
我知道这可以通过媒体查询来实现，但我担心即使display设置为none，也会同时下载两张图片。
我知道srcset，但担心IE不支持它。
我也花了一些时间在谷歌上搜索，但所有关于这个主题的帖子似乎都是4年前的。
那么，现代的方法是什么来处理多个图像，并在不同的屏幕尺寸下显示/隐藏它们，而不需要下载隐藏的图像？
浏览 11提问于2016-09-16得票数 0
我在一起使用object-fit: cover和srcset时遇到了一个问题。我将图像设置为： .banner-fit {
object-fit: cover;
height: 50vh;
width: 100vw;
max-width: 1300px;
} 图像使用srcset，如下所示 <img srcset="
./assets/images/media/media-4x.jpg 3200w,
./assets/images/media/media-3x.jpg 2400w,
./assets/images/m
浏览 15提问于2021-01-15得票数 2
当相同的HTML在HTML上重复时，根据大小显示响应图像。
我正在渲染下面的HTML，它在(Chrome/Firefox/IE)中工作良好。我正在使用css渲染div，并使用media query更改背景图像。
但是这种方法的一个问题是，如果相同的模板在页面上使用不同的图像，那么在两个地方都有相同的css“market-promo item__ image”将得到应用，并且只显示一个图像。
然而，它在Chrome和Firefox的所有方面都工作得很好。
<div class="market-product-item__image-wrapper">
<di
浏览 0提问于2018-12-21得票数 0
1回答
我正在做一个网站，其中有一系列的“英雄”面板运行在主页上，其中文字覆盖在大背景图像。
理想情况下，我希望在srcset和sizes中使用内联图像，这样浏览器就可以根据屏幕大小选择最合适的图像，而不仅仅是将最大的图像作为background-image，然后将其缩小到较小的屏幕。
到目前为止，我的标记看起来是：
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
srcset="/img/trekking_320.jpg 320w,
浏览 2提问于2017-06-09得票数 2
1回答
我有一个关于srcset和打印图像(打印到纸张)的问题。
假设根据屏幕大小有三种图像大小：
$image_url_1, $image_url_2, $image_url_3, $image_url_4
第一个是原始大小。其他的宽度分别为50%、33%和25%。对于小屏幕，$box-width-1 to $box-width-4都设置为100%，所以我总是想显示$image_url_1。
对于较大的屏幕，$box-width-1到$box-width-4的尺寸不同(50%、33%和25%)，因此图像应与每个框的大小相匹配。
<picture>
<source media=&
浏览 2提问于2018-03-19得票数 1
我已经阅读了有关如何在gatsby.js中创建不同大小的响应式图像的信息
我设法在小型设备上做到了这一点，它工作得很好，但在桌面上，图像不包含在父容器中，并调整了大小，但它显示为全尺寸。
这是我的问题：
export const pageQuery = graphql`
query {
allImageSharp {
edges {
node {
... on ImageSharp {
fluid {
src
}
}
}
浏览 0提问于2018-09-13得票数 2
我正试图掌握使用srcset进行回波图像的窍门，到目前为止，我已经掌握了这一点。
<img
src="https://dummyimage.com/1500x300/2a9c2a/ffffff"
srcset="https://dummyimage.com/1200x300/2a9c2a/ffffff 1200w,
https://dummyimage.com/992x300/2a9c2a/ffffff 992w,
https://dummyimage.co
浏览 8提问于2022-03-21得票数 1
回答已采纳
1回答
我正在添加一个图像到我的网站，将需要是不同的尺寸，根据屏幕的分辨率(相当常见)。
然而，让我感到震惊的是，我在<img srcset="X">中设置的图像并没有在给定的宽度上发生变化。
(请注意，我在chrome中使用incogento，所以这不是著名的缓存问题)
总之-继续表演：
几幅图像(特别大小)
HTML代码：
<img src="im2/1280.jpg"
srcset="im2/120.jpg 120w,
im2/320.jpg 320w,
im2/640
浏览 2提问于2020-12-19得票数 0
到目前为止，我已经读到过很多关于这个问题的文章，而且它也发生在我自己的项目中。下面是我到目前为止发现的关于srcset和attribte大小的介绍。
关于如何使用srcset-attribute (源w3c：)，有两种不同的可能性：
当图像呈现大小固定时，Device-pixel-ratio-based 选择
这是一种简单可靠的使用srcset的方法。您只需说:如果目标设备的设备像素比大于x，则以以下更高的分辨率显示此图像。
当图像的呈现大小取决于视口宽度(基于视口的选择)时，x描述符是不合适的，但可以与艺术方向一起使用。
示例：
<img src="/up
浏览 1提问于2017-11-23得票数 8
我正在使用服务器端的图像，通过<img src="converter/500w/picture.jpg">这样的URL动态调整大小。这意味着我有一个几乎无限的图像大小，我能够服务。现在，我正在使用<img srcset="..."> (以及<picture>标记)来提供各种随机选择的图像大小。然而，这会导致大量的标记，而且并不是真正的灵活。
是否可以使用srcset (或其他HTML )告诉浏览器如何请求任意大小的图像？如果没有，是否有可能在所有浏览器上可靠地使用JavaScript/jQuery完成这一任务？
在你的
浏览 6提问于2015-06-21得票数 2
如果我既需要图片的缩略图(即低分辨率版本)，又需要全尺寸版本，该怎么办？
我有一个中等风格的图像缩放组件()，我希望该组件显示缩略图，只有当它被点击，它被缩小时，它通过指定不同的url到src和enlargedSrc来显示全尺寸的图片。
这就是我查询所有图像文件的方式
const ImageSupplier = () => {
const { allFile } = useStaticQuery(graphql`
query {
allFile(
filter: {
extension: { regex: "/(jpg)
浏览 1提问于2019-08-27得票数 1
1回答
在源代码中应用响应图像属性
、、、、
我创建了两个版本的徽标，一个垂直版和一个水平版，第一个版本用于移动屏幕，第二个版本用于桌面，以便从一个版本切换到另一个版本，我需要图片元素。不幸的是，我未能在Dreamweaver和崇高文本编辑器中实现它。经过数小时的研究，我注意到的唯一一件事是，它只适用于虚拟图像(placehold.it)。更重要的是，问题似乎是srcset属性(它不能显示任何东西，不管是什么浏览器)，而src属性似乎正确地显示了源图像。任何类型的帮助都将是最感谢的！(代码如下)
<picture>
<source media="(min-width:600px)"
s
浏览 4提问于2016-05-03得票数 0
1回答
WordPress中的自定义循环有一个小问题。我正在使用皇家滑块(普通的jquery版本)，并希望将附加的post图像显示为滑块。
到目前为止，它与以下代码一起工作：
<?php
$args = array( 'post_type' => 'attachment', 'posts_per_page' => -1, 'order' => 'ASC', 'post_status' =>'any', 'post_parent' =>
浏览 0提问于2015-10-27得票数 1
1回答
艺术导向的响应式图像
、、、、
我正在尝试更改/art直接基于设备和屏幕尺寸的图像- not只更改图像的分辨率。
我使用的是<picture>元素，当我在桌面上调整浏览器大小时，它工作得很好，但在移动设备上不起作用。
代码当前为：
<picture>
<source media="(min-width: 950px)" srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home.png">
<img src="http://phillipsperfecti
浏览 0提问于2016-06-01得票数 0
1回答
我想在网站上展示一个横幅。在4k屏幕上，智能手机应该更大一些，更小但更高，比如780x550px。
我使用这样的带有srcset的图像
<img src="image.jpg"
srcset="image-2560x400px.jpg 2560w,
image-1920x450px.jpg 1920w,
image-1024x500px.jpg 1024w,
image-780x550px 780w"
alt="*" />
不幸的是，大多数智能手机都具有非常高的分辨率，所以它们也会在垂直屏幕上使用1920x450像素的横幅。
我尝
浏览 11提问于2022-11-19得票数 0
2回答
我一直在搜索响应性的图片帖子和例子，但我找不到解决方案。这看起来应该很简单，我可能只是遗漏了什么:如何根据容器宽度而不是屏幕宽度来提供合适的图像大小？
也就是说，我有一个桌面屏幕，1980 it宽，但是一个灵活的容器，即屏幕的1/3，所以最大图像大小只需要660 it宽，所以它应该显示800 w图像。但是srcset只会离开屏幕大小，所以即使我显示缩略图，它也会加载1200 w图像。有什么办法能动态地做到这一点吗。即仍然使用弹性箱和动态宽度，但它是否根据容器的宽度而不是屏幕宽度来提供适当的大小？任何帮助都将不胜感激，谢谢！
<div class="flex justify-cen
浏览 5提问于2020-04-18得票数 7
回答已采纳
2回答
假设您有一个类似于以下内容的图片元素：
<picture class='my-image'>
<source media="(min-width: 1024px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="med.jpg">
<source srcset="small.jpg">
<img src="small.jpg"
浏览 6提问于2017-01-30得票数 1
我使用srcset在大型设备上为用户显示一个动画GIF，但需要在中小型设备上向用户显示一个静态JPG。
当我在1x屏幕上调整浏览器窗口的大小时，下面的代码工作得很好。我遇到的问题是当以纵向模式(768 in )查看iPad上的页面时，动画GIF正在显示。我知道浏览器试图显示一个更高质量的图像，因为它是2倍的分辨率，但在我的例子中，它需要是一个完全不同的图像。
如果用户的屏幕大于940 is，如何将其更改为只显示GIF？
<img src="static.jpg" sizes="(max-width: 940px)" srcset="static.j
浏览 4提问于2016-02-18得票数 2
回答已采纳
1回答
我在一篇html文章中有图像，该文章使用包含div的固定列宽属性设置为列。
我已经为响应式图像添加了srcset，它工作得很好，只是它根据包含div的宽度加载最大的图像，而不是根据列的宽度加载较小的图像。
在某些情况下，文章没有列显示，所以我希望相同的图像资源集可以满足这两种情况。有没有办法让srcset在显示固定列的内容时选择较小尺寸的图片？
浏览 0提问于2018-02-14得票数 1
我在一个有很多JPEG的网站上使用fancybox。我使用单个大图像文件，至少是最终最大观看尺寸的两倍，并进行了大量压缩以减少KB。这项技术似乎工作得很好，节省了制作每个原始文件的x2和x3版本的大量时间，并且避免了使用srcset。
通过fancybox在缩放图像中查看的图像有其他视图，但缩放图像以文件的实际像素大小显示，因此我不知道如何控制fancybox缩放图像在屏幕上的最终显示大小。
这是可以做到的吗？谢谢，Peter H。
(缩放后的图像大小并不完全相同)
浏览 0提问于2016-10-22得票数 0
下面是我写的HTML代码： <img src="Images/small.jpg"
srcset="Images/small.jpg 200w,
Images/large.jpg"> 所以，我希望small.jpg的屏幕宽度可以达到200，然后我希望使用large.jpg。问题是，在开发人员工具中，禁用缓存并在每次刷新页面时，此代码不能在1x像素密度下工作，在2x和3x密度下工作良好，无论密度如何，都遵守200px的限制。 如果我使用3张图片，例如： <img src="Images/small.jpg"
浏览 9提问于2020-04-23得票数 0
2回答
我正在尝试使用响应式图像的srcset和sizes属性来将特定的图像提供给特定的屏幕尺寸，以进行性能优化和响应式设计。但是Vue-loader似乎不支持它们，有人遇到过类似的问题吗？如果不是，那么可能会有一个最佳的解决方案来优化应用程序的性能，这主要是受高清图像的影响。下面是我试图在.vue模板中实现的一个示例
<img srcset="../assets/img-1.jpg 300w, ../assets/img-1-large.jpg 100vw"
sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em)
浏览 3提问于2018-10-11得票数 5
1回答
图片元素正在迅速广泛传播()，我认为这是避免提供超大/小尺寸图片的好方法，特别是当您希望在移动和桌面上以视口宽度的100%显示相同的图片时。
这个问题可以这样解决：
<img
srcset="large.jpg 1920w,
medium.jpg 720w,
small.jpg 360w"
src="medium.jpg">
这允许浏览器聪明地决定加载哪幅图片，但我发现这种方法存在一个问题:许多移动设备的像素密度为2或更多！因此，当360 w显示它时，如果我们希望该图像看起来很
浏览 4提问于2015-09-21得票数 26
1回答
我正在试图找出最好和最简单的方法来创建全屏图像，支持视网膜屏幕，并涵盖从大到桌面到手机的屏幕尺寸。图像始终以所有宽度填充视口。对我来说，似乎最简单的方法是创建一系列大小的图像，从桌面屏幕的像素宽度的两倍(对于桌面视网膜)到手机屏幕的宽度，然后将它们都列在srcset下，让浏览器找出它，大概因为img总是全宽的，我不需要担心大小属性？
这是最好的方法吗？
浏览 2提问于2015-02-09得票数 0
1回答
图像在移动设备上不显示
、、、
我正在尝试在不同的屏幕尺寸上显示不同的图像。如果我调整窗口大小，禁用缓存并刷新，这是正常的，但当我选择设备来查看特定屏幕分辨率的结果时，图像不能正确显示。当设备为iPad (768x1024) -显示图像1170x425时，显示iPhone (375x667) -图像768x480。未加载移动设备的图像。我哪里做错了？
img {
max-width: 100%;
}
<div style="max-width: 1170px; margin: 0 auto;">
<img srcset="https://i.imgur.com/NM5
浏览 3提问于2018-02-23得票数 2
2回答
我需要在数学/算法方面的帮助，以获取已知大小的图像，并适合两个屏幕尺寸之一：
720 x 480或1280 x 1024。
图像尺寸来自XML文件，但是这些尺寸是web尺寸，我还从XML中选择了比web尺寸更高或更低的图像。
我想要的是使用网页尺寸的纵横比来显示更高分辨率的图像，如果可用，在HD (1280x720)屏幕上，或者，如果用户在SD屏幕(720x480)上，在该屏幕上显示图像。
其他对此有用但优先级较低的事情是，如果我知道图像的分辨率在两个维度上都比SD屏幕小(在这种情况下，我只知道web尺寸和图像文件的水平尺寸)，则在该屏幕上将其显示为实际大小。
希望这一点足够清楚。
谢谢!
浏览 0提问于2011-07-04得票数 52
回答已采纳
1回答
我正在使用signed urls的图像，但也希望他们有响应性。我真的需要在图片的所有尺寸版本上签名吗？它似乎更有效，如果首先，实际的大小，将显示确定，所以我只需要提供一个签名的网址为该图像。对于这一点，有没有通用的方法？ 例如，这个html： <img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
浏览 11提问于2019-06-12得票数 3
我在functions.php中设置了图像大小，如
add_image_size( 'article-lede', 500, 600 );
它出现在再生的缩略图中，而我却再生了它们。所以我上传了一个图片到媒体库，它是934x1200。
我的模板代码被设置为使用“文章-lede”图像：
'featured-image img-fluid']);?>
但是页面显示的是一个全尺寸的图像。生成的HTML中的img标记的高度和宽度设置为大尺寸，而SRCSET的大小为SRCSET，其中没有一个是我指定的项目大小：
我是如何让它显示500x600版本的？
浏览 0提问于2019-11-25得票数 0
回答已采纳
我想做一些我认为非常简单的事情:在200px x 200px上显示一个图像，除非屏幕大小是< 500px，在这种情况下，可以在100px x 100px上显示它。
这似乎是最基本的响应设计:只有一个图像，两个不同的尺寸基于屏幕的大小.但是仅仅使用Next的<Image>标记似乎是不可能的。这个标签有很多相关的道具(sizes，loader，srcSet .加上下一个配置中的deviceSizes和imageSizes ).但他们似乎都不让我实现这一基本目标。
我终于把事情做好了：
从使用objectFit="cover"和的Image开始
200px的用一个具
浏览 1提问于2022-05-23得票数 3
1回答
根据我对Android对多屏幕支持的理解，布局是根据屏幕密度和大小进行缩放的，而图像是根据屏幕密度进行缩放的。
这可确保图像在不同密度的屏幕上显示相同的大小。为了克服可能的缩放问题，建议提供不同版本的图像，四种广义密度之间的缩放比例为3:4:6:8。
但是，如果我的屏幕只是简单地显示下面有一些文本的照片，并且我想利用一些手机中额外的屏幕尺寸，因此从用户的角度来看，以比在较小屏幕上更大的尺寸显示照片，那么最好的方法是什么？
同样的wrt显示图像，最好使用wrap_content还是dp -两者的优势是什么？
提前感谢！
P
浏览 1提问于2011-07-29得票数 0
回答已采纳
也许值得一提的是，我用的是反应和Webpack。
这方面的例子：
<img src="https://increasify.com.au/wp-content/uploads/2016/08/default-image.png" srcset="http://www.rangerwoodperiyar.com/images/joomlart/demo/default.jpg x2"
我的目标是利用srcset属性来检测屏幕密度是否为x2，以让浏览器决定更大图像的使用。
图像显示得很好，但它没有使用srcset属性中描述的更大的视网膜图像或更高密度的屏幕。
浏览 0提问于2018-12-05得票数 2
回答已采纳
2回答
我有两个图像，一个是1000 x 800 px (“大”)，一个是200 x 200 px (“小”)。当屏幕小于或等于500个CSS像素宽时，我想使用srcset / sizes / 来显示小图像，否则显示大图像。
下面是一个稻草人的建议：
<img srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w, http://i.imgur.com/BgLoqRx.jpg 500w">
这在我的1x像素密度显示器上工作得很好。但是当我切换到我的2x像素密度视网膜显示器时，突然小图像只有当视口小于或等于250个CSS像素宽时才会显示。
浏览 2提问于2014-11-26得票数 12
回答已采纳
我正在寻找一个响应的图像策略，允许服务不同的jpg质量基于设备像素密度。
在一个高分辨率的小屏幕上，我会提供一个低质量但高分辨率的jpg。在低像素密度的大屏幕上，我会提供高质量的jpg，理想的匹配设备分辨率。
问题：
这在<img srcset=".." sizes=".." />中有可能吗
背景/设想
不同的原始图像和不同的原始尺寸。
不同的图像显示上下文:作为画廊缩略图，嵌入在博客帖子中，在一个模态框中，全屏。
响应性布局，媒体查询改变这些图像的显示大小，不一定成比例。
例如，桌面上显示为100 in缩略图的内容，可能会在移动设备上
浏览 1提问于2016-02-03得票数 3
我遇到了一个非常令人沮丧的问题:移动设备(在android & ios上测试chrome，在ios上测试safari )总是使用srcset中最大大小的图像(即使编辑器中显式地选择了更小的大小)。
以下是问题的总结：
在Wordpress编辑器中，当插入图像时，我选择“大”(720 as X 480 As)作为图像大小。
在移动设备上，每次下载来自srcset的全尺寸映像并显示在前端。
所以问题有两方面：
首先，尽管积极地选择了大尺寸的图像(为什么这是可能的呢？)
第二，chrome不尊重src集，并且正在下载完整大小的映像。
这是有问题的，因为我有意识地生成了许多不同的图像大小，因为
浏览 0提问于2017-08-10得票数 0
2回答
重新缩放布局以适应屏幕
、、、、
我想要将我的应用程序布局缩放到屏幕大小。
当我在一个4英寸的模拟器上运行它时(但我不显示实际的屏幕尺寸，所以它看起来更大)
它看起来像这样，
然而，当我在一个更大的模拟器上使用实际屏幕尺寸时，它看起来是这样的，
我的layout.xml是
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_co
浏览 0提问于2014-02-18得票数 0
我正在从服务器获取字节数组形式的GIF图像。现在，由于安卓不能在ImageView中显示动画GIF，我必须对其进行解码，并将其显示为电影。
我在这里面临的问题是，我从服务器获得的GIF已经为iPhone设置了尺寸。因此，在屏幕/分辨率更大的Android设备上，GIF显得非常小。
要解决这个问题，我有两个选择: 1)我可以从GIF中提取每个位图，并根据我的屏幕尺寸缩放它们。但为此，我将不得不弄乱宽高比，图像将被拉伸出来。
2)或者我可以要求服务器人员添加对Android设备的支持，这样他们就可以根据我的屏幕尺寸给我发送GIF。
请推荐最好的解决方案。如果你有任何自己的建议，请一定要告诉我。
浏览 3提问于2011-08-05得票数 0
回答已采纳
我已经将wp_get_attachment_image_srcset()输出的图像大小限制在768像素(默认情况下，它们限制在1600个像素)：
function set_max_srcset_image_width( $max_srcset_image_width, $sizes_array ) {
return 768;
}
add_filter( 'max_srcset_image_width', 'set_max_srcset_image_width', 10, 2 );
然而，我有一个图像，我想恢复到默认的1600最大。
由于max_srcse
浏览 1提问于2018-10-30得票数 1
回答已采纳
1回答
我的媒体库中的图像是560×315，但是当我检查图像时，这是我找到的代码。正在加载srcset图像，而不是我的全部分辨率图像。
<img src="https://domain.com/feat-image-150x84.png" class="alignleft post-image" alt="Return of Medicare OEP"
srcset="https://domain.com/feat-image-150x84.png 150w,
https://domain.com/feat-image-300x169.
浏览 0提问于2018-09-17得票数 1
回答已采纳
因此，我正在尝试制作一个响应性的图像组件，它将根据屏幕分辨率/像素密度加载适当大小的图像。据我所知，srcset属性正是为此而设计的，但我无法让它做我想做的事情。我做错什么了？下面是呈现给DOM的元素：
<img src="/static/media/image2_1x.20b2e636.png" srcset="/static/media/image2_05x.198c1f0f.png 590w, /static/media/image2_1x.20b2e636.png 1180w, /static/media/image2_2x.632d77c5.png 23
浏览 2提问于2020-03-11得票数 4
回答已采纳
我需要一个横幅显示在全宽度跨越许多屏幕大小。为了实现这一点，我有4个版本的横幅图像。
横幅-long@2x.jpg (2880x640)
横幅-Long.jpg (1440x320)
短@2x.jpg (1440x640)
横幅-短片. (720x320)
我使用的是srcset属性。
<img
src="/images/interface/banner-long.jpg"
srcset="/images/interface/banner-long@2x.jpg 2880w,
/images/inte
浏览 4提问于2015-08-10得票数 2
回答已采纳
1回答
源集合渲染图像的大小错误
、、、、
我正在尝试提供基于设备宽度的响应/自适应图像。 原图： <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
浏览 20提问于2019-12-26得票数 0
我有一个屏幕，需要在水平LinearLayout中显示许多图像。
我为xhdpi设计的。我将每个ImageView的大小设置为100 of，在模拟器(xhdpi 768x12804.7“屏幕)上，它看起来类似于，而在平板仿真器(xhdpi1534x20489”)上，它看起来像。
在后一种情况下，图像没有适当地缩放，看起来就像在较小的屏幕上一样。
有没有办法使它在两个屏幕尺寸上看起来都一样？
浏览 0提问于2018-01-26得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
