腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
Google Chrome版本40 srcset属性问题
html
、
image
、
google-chrome
、
responsive-design
、
srcset
我在Chrome40.0.2214.91的img标签(响应图像)上看到很多srcset属性不一致的地方 在我更新到Chrome v40之前(我在~39),srcset属性工作得很好,并且会在浏览器调整大小时交换图像。现在,如果我将浏览器设置为所需的宽度,然后刷新页面,有时会显示图像的较小版本。其他时候,它无论如何都不会起作用。 测试jsbin: 我有一个图片标签: <img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w"> 我还使用non-Placehold.it
浏览 3
提问于2015-01-27
得票数 17
回答已采纳
1
回答
如何在手机上使用图像元素来获取清晰的图像
html
、
css
、
image
图片元素正在迅速广泛传播(),我认为这是避免提供超大/小尺寸图片的好方法,特别是当您希望在移动和桌面上以视口宽度的100%显示相同的图片时。 这个问题可以这样解决: <img srcset="large.jpg 1920w, medium.jpg 720w, small.jpg 360w" src="medium.jpg"> 这允许浏览器聪明地决定加载哪幅图片,但我发现这种方法存在一个问题:许多移动设备的像素密度为2或更多!因此,当360 w显示它时,如果我们希望该图像看起来很
浏览 4
提问于2015-09-21
得票数 26
1
回答
如何在每个图像上有不同链接的<picture>元素?
javascript
、
html
很久以前,我用Bootstrap旋转木马实现了一个头文件:你知道,类似这样的东西: <div class="carousel"> <div class="item"><img src="pic1.jpg"></div> <div class="item"><a href="example.com"><img src="pic2.jpg"></a></div> </div&
浏览 0
提问于2021-05-24
得票数 3
回答已采纳
5
回答
了解与HiDPI监视器结合的srcset和大小
html
、
image
、
responsive-images
、
srcset
我已经进入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.
浏览 0
提问于2018-03-08
得票数 3
回答已采纳
3
回答
什么是IMG标签中的srcset属性以及如何使用它?
html
、
css
我想知道如何开始在我的移动应用中使用HTML srcset img属性。或者是否有其他jQuery插件可以帮助我解决图像分辨率问题。 <img srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x" alt="Banner Image" />
浏览 0
提问于2013-10-28
得票数 32
2
回答
HTML5 srcset,尺码和艺术方向
html
、
responsive-design
、
srcset
、
responsive-images
、
picture-element
据我所知,srcset和sizes属性更侧重于为设备的大小和分辨率应用适当的缩放图像。 似乎没有办法使用这些属性来根据屏幕大小来选择另一个图像,例如一个裁剪或不同方向的图像。 这是否对情况的正确理解?这是否意味着我们必须等待picture元素在此任务中得到广泛支持?
浏览 8
提问于2015-09-30
得票数 2
回答已采纳
2
回答
HTML srcset规范:澄清
html
、
image
、
srcset
我已经编写了一个JavaScript填充程序来实现srcset,但是我需要澄清指定的行为。 虽然srcset允许您指定宽度或分辨率的条件,但我无法确定是否可以同时指定两者。例如: <img src="images/oh1x408.jpg" srcset="images/oh1x192.jpg, images/oh1x408.jpg 420w, images/oh2x192.jpg 2x, images/oh2x408.jpg 2x 420w"> 这应该包括单分辨率和双分辨率,以及更小和更宽的屏幕。 我没有见过指定宽度和分辨率的例子。问
浏览 0
提问于2015-07-16
得票数 4
回答已采纳
1
回答
HTML5 5的srcset总是加载大型映像(而且它没有缓存)。
google-chrome
、
mobile
、
responsive-design
、
responsive
、
srcset
这是我的HTML: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>serset test</title> </head> <body> <img srcset="/img/about/icon-320.png 320w, /img/about/icon-480.jpg 480w,
浏览 2
提问于2018-03-26
得票数 4
回答已采纳
2
回答
HTML可以用于多<source>回退吗?
html
和元素支持多个,因此浏览器可以选择要呈现的最佳媒体文件。我需要一个站点,为了冗余和负载平衡,媒体必须托管在多个CDN上。我可以使用多个源,每个CDN一个,这样浏览器将自动选择第一个可用的源? 我已经试验了下面的片段,如果第一个<source>失败了,似乎<source>会倒退到另一个<source>,但是<picture>没有(在Chrome76上测试)。 <html> <body> <picture class='media'> <source srcset='
浏览 0
提问于2019-09-12
得票数 2
回答已采纳
4
回答
为图片标签指定显式宽度和高度
html
、
image
、
google-pagespeed
、
pagespeed-insights
Lighthour和Pagespeed insight不断告诉我要为我的图像定义一个明确的宽度和高度。但我的大多数图片都来自图片标签,因为手机和桌面图片的大小是不同的。如何根据所选图片提供不同的宽度和高度值? <picture> <source media="(max-width:767px)" srcset="img_pink_flowers_small.jpg"> <source media="(min-width:768px)" srcset="img_pink_flowers_large.jp
浏览 10
提问于2021-06-30
得票数 2
1
回答
具有“自动”高度(2015)的100%宽度背景图像-交叉浏览器
html
、
css
、
background
、
background-image
、
responsiveness
我问这个问题,因为2013年这个帖子()上的答案似乎不再有效了。 我需要一个响应的背景图像,100%的宽度和自动高度。 我想提供不同的图像取决于屏幕大小使用媒体查询,而不是Javascript。 如果它能在不同的浏览器上工作(至少是Chrome / Firefox),那就太好了。 使用以下代码: <img src="image.jpg" style="width: 100%;"> 该图像显示正确,100%的宽度和自动高度(见这里:),但我无法取代它的来源时,改变屏幕大小,,除非我使用Javascript。 因此,我正在使用DIV上
浏览 0
提问于2015-12-08
得票数 4
回答已采纳
1
回答
几种设备的图像响应能力?
javascript
、
jquery
、
html
、
css
这是我的html代码: <picture> <source srcset="480_smaller_landscape.jpg" media="(max-width: 480px) and (orientation: landscape)"> <source srcset="776_smaller_portrait.jpg" media="(max-width: 776px) and (orientation: portrait)"> <source srcset="1080_de
浏览 3
提问于2017-10-25
得票数 0
2
回答
解释图像的“`srcset`”中的“w”
html
、
image
、
css
、
srcset
据我所知,srcset用于根据设备的dpi来确定要加载的图像。我在Google基础上看到了这个例子,它似乎使用w单元,而vw单元恰好是视口宽度的1%: <img src="lighthouse-200.jpg" sizes="50vw" srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w, lighthouse-400.jpg 400w, lighthouse-800.jpg 800w, lighthouse-1000.jpg
浏览 3
提问于2016-11-30
得票数 9
回答已采纳
2
回答
图像和响应图像的srcset
css
、
html
、
image
、
srcset
我正在尝试使用srcset为我的网站创建一个响应图像,想法是我有几个断点,320,768,1024,1280,对于每个断点,我会显示一个合适的分辨率图像,所以对于320-768之间的断点,我会显示768图像。 我尝试过以下几种方法: <img src="http://abc.dev/wp-content/uploads/2017/05/abc-320x187.jpg" srcset="http://abc.dev/wp-content/uploads/2017/05/abc-768x450.jpg 480w, http://ab
浏览 1
提问于2017-05-11
得票数 2
1
回答
高度响应的<picture>元素与CSS‘背景-图像’
html
、
css
我有几个问题要问病人,我只是在学习,没有在网上找到任何答案。每个解决方案都有很多主题,但没有回答我的问题。 因此,我们有两种主要的响应方式在我们的网站上使用图片。第一种是HTML方法,第二种是CSS。 这是每个人都知道的纯HTML解决方案,在这里,图像不仅基于断点,而且还检测HI DPI屏幕和提供高或标准像素密度图像。我非常喜欢这种方法,所以我想每次都使用它,不幸的是,它有点有限。 <picture> <source srcset="img/desktop.jpg 1920w, img/desktop-hi-dpi.jpg 3840w" media=
浏览 3
提问于2022-05-27
得票数 0
1
回答
Srcset不工作Firefox
html
、
css
、
firefox
、
srcset
、
responsive-images
当浏览器达到特定的屏幕大小时,我试图使用srcset属性来交换图像。当屏幕尺寸超过768像素宽时,我需要桌面图像。 在不包括firefox的大多数浏览器中,我都能用下面的代码完成这一任务。我对“srcset”游戏非常陌生,所以我不确定我的端是否有语法错误。记住视网膜设备,有人知道我在这里错过了什么吗?浏览器对srcset的支持似乎足够了,所以我不确定是什么原因造成了这种情况。 <img class="desktop-hero" alt="" src="../img/hero_desktop.jpg" srcset="../img/h
浏览 1
提问于2015-10-07
得票数 1
回答已采纳
1
回答
与响应图像的图片元素中的源元素混淆
html
、
responsive-images
在下面的代码中,在源元素中的两个实例中提到了媒体查询条件。 1-媒体属性 2-大小属性 <picture> <source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw" srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 380w"> <source media="(max-width: 1400px)" sizes="(max-w
浏览 1
提问于2017-11-06
得票数 0
回答已采纳
1
回答
为什么'srcset‘属性在页面上不起作用?
html
、
css
、
frontend
、
srcset
我一直在做一个开发网站的项目。我想使用“srcset”属性在不同的设备上应用不同大小的图像。下面是我如何在代码中定义我的图像: <img srcset="images/mobile/image-header-750w.jpg 750w, images/desktop/image-header-2880w.jpg 2880w" sizes="(max-width: 767px) 750w, 2880w" src="images/desktop/image-h
浏览 2
提问于2021-12-02
得票数 1
1
回答
html中srcset属性的w和px
html
、
image
、
srcset
、
pixel-density
在html中img元素的srcset属性中,我们可以指定每个源的宽度或像素密度。我们使用w指定宽度,x指定像素密度。我有一些关于w和x的问题。 500 w是否意味着图像的宽度为500像素?如果是,为什么在size属性中使用w而不是px? 1x意味着72像素/英寸的像素密度吗? 为什么图像有像素密度?我认为像素密度意味着物理长度/空间内的像素数。例如,每英寸的像素数。但是数字图像并不占用物理长度/空间,它只占用一些像素。那么,数字图像mean?...This的像素密度是什么呢?请告诉我,如果我是对的:一个图像只占用一些像素,但它可能是为了一个物理长度。例如,144个像素宽的按钮的图像
浏览 4
提问于2020-02-02
得票数 2
1
回答
<picture>的工作方式不像它应该的工作方式
html
、
css
、
image
下面是我的图片标签 <picture> <source media="(min-width: 1366px)" srcset="/LP/SpecialOffers/EC012722---ScrubBigOPromo-TILESDesktop content tile_grid.jpg?$staticlink$" > <source media="(min-width: 451px)"
浏览 2
提问于2022-01-25
得票数 1
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
图像生成模型中的条件生成技术改进
基于Pyhton的图像隐写术-如何隐藏图像中的数据
基于条件深度卷积生成对抗网络的图像识别方法
零基础课中-html、css静态网页的部分,是否保留?
辐照图贴图及其在基于图像的照明算法中的应用
热门
标签
更多标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
活动推荐
运营活动
广告
关闭
领券