srcset

srcset: define a file to retina desktop

由 て烟熏妆下的殇ゞ 提交于 2019-12-23 02:21:34
问题 This is how my image tag look like: <img src="img/thumb-teste-270x190.jpg" alt="usro" sizes="(max-width: 20em) 100vw, (min-width: 50em) 10vw" srcset="img/thumb-teste-270x190.jpg 270w, img/thumb-teste-690x486.jpg 690w" > For desktop device, I use a small thumb (270x190). For mobile devices, I use the big thumb (690x486). But how can I create a rule for retina desktop use a medium thumb (540x380)? 回答1: You don't need to specify that the 540x380 image must be used on retina, if you just add that

srcset and viewport width

由 别等时光非礼了梦想. 提交于 2019-12-20 03:52:11
问题 I have 2 images: one desktop version, one mobile version. I would like the desktop image to be replaced by the mobile image when the viewport width resizes below 480px, just as would with the following CSS with background-image property : .logo { background-image: url(http://placehold.it/400x200&text=desktop); } media screen and (max-width: 480px) { .logo { background-image: url(http://placehold.it/300x150&text=mobile); } } I thought I could achieve this with the srcset HTML attribute : <img

Can I use <picture> for both height and width-constrained images?

由 ↘锁芯ラ 提交于 2019-12-19 19:48:50
问题 I have a slideshow sort of thing where images will expand as large as they can, but not exceed the viewport's width or height. Basically object-fit: contain . I'd like to make these images responsive, since "as large as they can" for a phone and a great big desktop is quite the difference. I can't use <img srcset> because right now, it only does screen density ( x descriptors) or width ( w descriptors). So that leaves <picture> to manually make the selection logic myself. I started with:

How to use srcset and sizes for responsive images

由 断了今生、忘了曾经 提交于 2019-12-18 05:54:29
问题 I have following snap-points: 480px , 900px , 1800px , 2400px . and this markup: <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"> How should I get responsive images to work? 回答1: 1. Basics Device-pixel ratio Device-pixel ratio is the number of device pixels per CSS pixel which is related to: Pixel density of the device (number of physical pixels per inch) Zoom level

W3C Validation of SRCSET

由 孤街浪徒 提交于 2019-12-12 18:10:26
问题 W3C Validator is throwing an error on the following code: <img alt="My Unique Alternative Text" class="news-image-left" height="480" src="/images/en-us/news/20140214-01.jpg" srcset="/images/en-us/news/20140214-01.jpg 1x, /images/en-us/news/20140214-01-mobile.jpg 640w" style="border-width: 0px;" title="A Unique Image" width="1420" itemprop="image"> The error is: Bad value /images/en-us/news/20140214-01.jpg 1x, /images/en-us/news/20140214-01-mobile.jpg 640w for attribute srcset on element img:

Safari 10.0.1 not choosing correct image from srcset

由 亡梦爱人 提交于 2019-12-11 05:13:32
问题 Safari is not handling srcset correctly for some of the images on my site and is completely ignoring the rules I set in the sizes attribute. If you click on the link below and view it in Safari, you will see the images at the top are being displayed at their original sizes rather than the size I generated them as. However, at the bottom of the page it's worked? And has been downloaded as westfield-house-large-bottom-955x637.jpg. I've read that Safari is terrible at handling srcset and size

why is srcset not working?

由 独自空忆成欢 提交于 2019-12-11 02:22:01
问题 So i have this code: <html> <head> </head> <body> <img src="small.jpg" srcset="https://media.kulturbanause.de/blog/2014/09/responsive-images/small.jpg 320w, https://media.kulturbanause.de/blog/2014/09/responsive-images/medium.jpg 600w, https://media.kulturbanause.de/blog/2014/09/responsive-images/large.jpg 900w" alt=""> </html> According to the code, there should be a diffrent image be loaded for diffrent viewport sizes. however when I run this code on my phone, it still shows the large.jpg

Safari not requesting srcset images on resize

由 懵懂的女人 提交于 2019-12-10 17:14:32
问题 I want to provide responsive images, for that I use srcset attribute. <img src="https://res.cloudinary.com/demo/image/upload/w_480/group.jpg" alt="" srcset=" https://res.cloudinary.com/demo/image/upload/w_480/group.jpg 480w, https://res.cloudinary.com/demo/image/upload/w_750/group.jpg 750w, https://res.cloudinary.com/demo/image/upload/w_1334/group.jpg 1334w, https://res.cloudinary.com/demo/image/upload/w_1536/group.jpg 1536w, https://res.cloudinary.com/demo/image/upload/w_2048/group.jpg 2048w

Browser is loading two images - one for srcset, one for src (Chrome 41 et al)

由 余生颓废 提交于 2019-12-10 14:45:29
问题 I'm using the srcset attribute on a web page I'm developing. <img src="img/picture-820x496.jpg" srcset="img/picture-820x496.jpg 1200w, img/picture-374x226.jpg 992w, img/picture-305x185.jpg 768w, img/picture-707x428.jpg 300w" /> If I check which resources get loaded with the page, I see that Chrome 41 as well as FF using the polyfill as well as Safari 7 always load the image twice - once the full resolution and once the according size from the srcset attribute. What am I doing wrong here? 回答1:

Can I use `<img srcset>` or `<picture>` for image size rather than viewport size?

由 China☆狼群 提交于 2019-12-10 10:31:39
问题 I'm trying to use <img srcset /> to load images based on the size they'll appear on the page, rather than based on the size of the viewport. Perhaps examples will help: On any viewport, when the image is styled with width: 100% inside a 200px-wide <div> , img-200.jpg should load. On any viewport, when the image is styled with width: 100% inside a 400px -wide <div> , img-400.jpg should load. ...etc. I've done tons of Googling, but as best as I can tell, srcset is only used for changing images
订阅 srcset