我试图了解'img'的新'srcset'属性.我已经构建了一个简单的测试页面,但我从浏览器中看到的行为令人惊讶.
首先,这是测试页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test Page</title>
<style type="text/css">
section.wrapper {
width: 100%;
text-align: center;
}
section.wrapper div {
margin: 0 auto;
}
section.wrapper div img {
width: 288px;
height: 216px;
}
@media (min-width: 30em) { }
@media (min-width: 40em) {
section.wrapper div img {
width: 576px;
height: 432px;
}
}
@media (min-width: 48em) { }
@media (min-width: 64em) {
section.wrapper div img {
width: 720px;
height: 540px;
}
} …我想实现使用srcset的响应图像,描述在这里,所以图像SRC用户负载是最类似于他的决心.
问题是我做了这个测试并且它没有响应视口变化,
<img src="https://lorempixel.com/400/200/sports/"
alt=""
sizes="(min-width:1420px) 610px,
(min-width:1320px) 500px,
(min-width:1000px) 430px,
(min-width:620px) 280px,
280px"
srcset="https://lorempixel.com/620/200/sports/ 280w,
https://lorempixel.com/1000/300/animals/ 430w,
https://lorempixel.com/1320/400/cats/ 610w,
https://lorempixel.com/1420/500/abstract/ 1000w,
https://lorempixel.com/1600/600/fashion/ 1220w" />
jsfiddle:http://jsfiddle.net/ad857m1r/9/
知道我错过了什么吗？
在隐身模式下使用谷歌浏览器进行测试,每次都使用"空缓存和硬重新加载"重新加载页面.
我有以下html响应图像:
<img class="content-img" src="/app/uploads/2018/07/1400x750.png"
srcset="/app/uploads/2018/07/1400x750.png 1400w,
/app/uploads/2018/07/1400x750-768x411.png 768w,
/app/uploads/2018/07/1400x750-1280x686.png 1280w,
/app/uploads/2018/07/1400x750-520x279.png 520w,
/app/uploads/2018/07/1400x750-420x225.png 420w,
/app/uploads/2018/07/1400x750-340x182.png 340w,
/app/uploads/2018/07/1400x750-600x321.png 600w"
sizes="(max-width: 666px) 100vw, (max-width: 1399px) 38vw, 535px"
>
预期行为:
1.视口宽度0px - 666px:
2.视口宽度667像素 - 1399像素:
3.视口宽度1400+ px:
实际行为:
在Google Chrome中进行测试,使用开发工具检查img上的所有上述示例中的元素,在每种情况下生成的"CurrentSrc"是:
/app/uploads/2018/07/1400x750-520x279.png (正确)
/app/uploads/2018/07/1400x750-1280x686.png (INCORRECT(预期宽度为420px)
/app/uploads/2018/07/1400x750.png (INCORRECT(期望600px宽度)
我一直在挠头,其他类似的问题似乎都归结为谷歌Chrome缓存问题,但我在测试时已经小心消除了这个问题,但我仍然没有得到我期望的src图像.
我只有90%确定我已经为我想要的行为编写了正确的"尺寸"属性.请注意,由于排列了响应式CSS断点并尝试在上下文中加载合理的图像宽度,因此逻辑稍微复杂一些.
我今天一直在玩响应式图像,并一直在努力确保下载和显示正确尺寸的图像以用于以下捕捉点:480px,900px,1800px,2400px.
这是加价:
<img
sizes="(max-width: 2400px) 100vw, 2400px"
srcset="
boat-480.jpg 480w,
boat-900.jpg 900w,
boat-1800.jpg 1800w,
boat-2400.jpg 2400w"
src="boat-2400.jpg"
alt="This is a boat">
到目前为止,我已经设法让浏览器下载正确版本的图像,这样当我480px在Chrome中模拟屏幕时,浏览器下载的像素比为1900px.
但是,我注意到的是,虽然这一切看起来都很好,但浏览器也在下载1800px,实际上是在视图中显示而不是2400px.
奇怪的是,当我在iOS上的Chrome上测试时,浏览器实际上已经下载了480px,这更令人担忧.
知道为什么会这样吗？我错过了什么吗？我想我不需要900px属性,因为我1800px在所有视图中都设置了图像,但也许我还缺少其他的东西.
如果您有兴趣,可以在此处查看页面:
我真的很感谢你的帮助.
我尝试在一个srcset内部使用一个属性,image_tag但我不能使它工作.
我不确定它是语法错误还是通常在image_tag中不起作用.
是否可以在image_tag中使用srcset属性？
如果是,怎么样？,如果不是,为什么没有,是否有解决方法？
<%= link_to(image_tag("logo.png", alt: "logo", :id => "logo"), root_path) %>
我正在试图找到一种方法来为iOS8客户端提供高dpi图像,同时还为支持w语法的浏览器提供响应式图像资源.根据W3C标准,应该可以在一个srcset属性中混合使用两种语法:
<img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">
(来源:http://drafts.htmlwg.org/srcset/w3c-srcset/)
但是,当我在Chrome 38(OS X,没有高dpi)中运行该示例时,在其他情况下支持w语法,浏览器总是加载最大的图像(banner-HD.jpeg),而不管视口大小如何.当我添加
banner.jpeg 1x
到srcset Chrome使用该图像,但仍然忽略100w图像.
在我的情况下,我想指定一个较小版本的图像以及两个资源:
<img src="default.png"
srcset="small.png 480w, small@2x.png 480w 2x, medium.png 1x, medium@2x.png 2x">
这似乎适用于2x iOS8设备,选择medium@2x.png因为它们不支持w语法.但是,无论视口大小如何,Chrome似乎都不关心并加载medium.png.
我在这里做错了什么,或者这是Chrome的srcset实现中的一个已知问题？
我有两张图片，一张是 1000 x 800 像素（“大”），一张是 200 x 200 像素（“小”）。我想使用srcset /尺寸/ picturefill显示小画面时的画面小于或等于500个CSS像素宽，并且大的图像除外。
这是一个稻草人的提议：http : //jsfiddle.net/ghhjfo4z/1/embedded/result/
<img srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w, http://i.imgur.com/BgLoqRx.jpg 500w">
这在我的 1x 像素密度显示器上运行良好。但是当我切换到我的 2x 像素密度视网膜显示器时，突然只有当视口小于或等于 250 CSS 像素宽时才会显示小图像。
当视口小于或等于 500px 时，有什么方法可以让浏览器在我的 2x 像素密度显示器上使用小图像？
基本上我想忽略设备的像素密度，并使用srcset和/或尺寸仅根据视口的 CSS 像素宽度选择图像。
当使用响应图像设置<img>没有断点(即没有sizes属性)您通常提供不同的分辨率相同的图像,你然后在限定的多个版本srcset使用像素密度的语法,例如属性1x,2x,3x
但是,通常1x图像的版本与src属性中已定义的图像相同,因此有点多余.因此我想知道 - 在参数中定义1x一个真正必要/强制的版本？<img>srcset
仅使用时
<img src="http://placehold.it/350x150" srcset="http://placehold.it/700x300 2x">
代替
<img src="http://placehold.it/350x150" srcset="http://placehold.it/350x150 1x, http://placehold.it/700x300 2x">
然后至少Firefox将正确地显示350x150图像,并尽快缩放级别/ DPPX是> 1它将使用700x300图像.
省略1x定义srcset将节省几个字节,尤其是在具有大型缩略图库的页面上.
当你像这样使用srcset时:
<img src="example-src.jpg" srcset="example-1x.jpg 1x, example-2x.jpg 2x" />
或使用这样的图片标签:
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" />
</picture>
是否有可能找出浏览器决定使用的URL？检查标签本身的src属性<img>实际上并不能告诉您加载了哪个图像.
(对不起,如果这是重复的.我无法在任何地方找到解决方案.)
我正在尝试创建一个支持 WebP 的图片标签。
（如果屏幕尺寸超过 1024px，则加载 image-full，最大宽度为 1024px 时加载 image-1024，最大宽度为 768px 时加载 image-768，最大宽度为 500px 时加载 image-500）
我有这段代码，w3 验证器抱怨：当 srcset 属性具有任何带有宽度描述符的图像候选字符串时，尺寸属性也必须存在。
我如何在其中实现尺寸？我应该有更好/不同的方法吗？
<picture>
// load webp in different sizes if browser supports it
<source media="(min-width: 1025px)"
srcset="webp/image-full.webp"
type="image/webp">
<source media="(max-width: 1024px)"
srcset="webp/image-1024.webp"
type="image/webp">
<source media="(max-width: 768px)"
srcset="webp/image-768.webp"
type="image/webp">
<source media="(max-width: 500px)"
srcset="webp/image-500.webp"
type="image/webp">
// load jpg in different sizes if browser doesn't support webp
<source media="(min-width: 1025px)"
srcset="siteimages/image-full.jpg"
type="image/jpeg">
<source media="(max-width: 1024px)"
srcset="siteimages/image-1024.jpg"
type="image/jpeg">
<source media="(max-width: 768px)"
srcset="siteimages/image-768.jpg"
type="image/jpeg">
<source media="(max-width: 500px)" …