srcset | 易学教程

HTML5 srcset: Mixing x and w syntax

阅读更多关于 HTML5 srcset: Mixing x and w syntax

I'm trying to figure out a way to provide high dpi images to iOS8 clients while also providing responsive image resources for browsers supporting the w syntax. According to the W3C standard it should be possible to mix both syntaxes in one srcset attribute: <img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> (Source: http://drafts.htmlwg.org/srcset/w3c-srcset/ ) However, when I run that example in Chrome 38 (OS X, no high dpi) which does support the w syntax in other cases the browser always loads the biggest image

Is there something wrong with my srcset definition, or is current browser support just weak?

阅读更多关于 Is there something wrong with my srcset definition, or is current browser support just weak?

I'm trying to get my head around the new 'srcset' attribute of 'img'. I've built a simple test page, but the behavior I see from browsers is surprising. First, here's the test page: <!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 {

How do I tell srcset attribute to load NO images when viewport smaller than certain size

阅读更多关于 How do I tell srcset attribute to load NO images when viewport smaller than certain size

I'm having trouble understanding how to keep srcset from loading any images on screens < 768px . I've tried the code below but the sizes attribute doesn't seem to do what you may think. Below loads 1024.jpg on all screen sizes: <img src="default.jpg" srcset="img/1024.jpg 1024w" sizes="(min-width: 768px) 768px, 100vw" /> Or the picture element, if it would honor an empty srcset but it only "hints" to which image a browser should load. The other answer isn't really satisfying. In general with srcset you give the browser the choice to select an image candidate. While you can assume which image is

Is it possible to recalculate the `srcset` image used if browser window is resized?

阅读更多关于 Is it possible to recalculate the `srcset` image used if browser window is resized?

Is it possible to get srcset to recalculate the browser window size once the page has loaded, and thus update the image its using. The reason you'd want to do this is because if on a desktop you have your browser window compressed, load a site, then make the browser window bigger, it will just scale the "small.jpg" (as set in the srcset ) so the user will end up with a pixilated image. I started make a jsfiddle to show the issue, but it dosnt work well, as i think srcset is calculated by the browser window, rather than the jsfiddle results grid. If you are interested you can copy and paste

How does the browser pick the right image using <img> “sizes” and “srcset” attributes?

阅读更多关于 How does the browser pick the right image using “sizes” and “srcset” attributes?

问题 How does the srcset attribute determine the correct image in conjunction with the sizes attribute? Take this image for example: <img alt="Demo image" sizes="(min-width: 1024px) 512px, 100vw" srcset="img/banner-large.jpg 2048w, img/banner-medium.jpg 1400w, img/banner-small.jpg 800w"> (I cleared the cache in Chrome) I thought that the last image would always be chosen (800w), because of the 512px (sizes) and the image width of 800w (srcset), but that image did not always get selected? Why? 回答1:

How does the browser pick the right image using <img> “sizes” and “srcset” attributes?

阅读更多关于 How does the browser pick the right image using “sizes” and “srcset” attributes?

How does the srcset attribute determine the correct image in conjunction with the sizes attribute? Take this image for example: <img alt="Demo image" sizes="(min-width: 1024px) 512px, 100vw" srcset="img/banner-large.jpg 2048w, img/banner-medium.jpg 1400w, img/banner-small.jpg 800w"> (I cleared the cache in Chrome) I thought that the last image would always be chosen (800w), because of the 512px (sizes) and the image width of 800w (srcset), but that image did not always get selected? Why? The sizes attribute determines the media condition that applies to the current device width (the first

Get the current image source of a picture element

阅读更多关于 Get the current image source of a picture element

问题 An HTMLImageElement has a currentSrc property so we can get the current source of an img element. Useful when defining multiple possible sources with srcset . There seems to be no equivalent for an HTMLPictureElement. Is there another way we can find the current source of a picture element with Javascript? 回答1: You can access the currentSrc of the img element within a picture element to get the applied image. In the demo below (if you're on a desktop with your browser full-width) the

Is there a srcset equivalent for css background image

阅读更多关于 Is there a srcset equivalent for css background image

img with srcset attribute looks like a great way of doing responsive images. Is there an equivalent syntax that works in css background-image property? HTML <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"> CSS .mycontainer { background: url(?something goes here?); } Yoav Weiss image-set is the equivalent CSS feature. We should add equivalent srcset functionality (defining resources according to their dimensions) to the spec. Currently it's only implemented in Safari, Chrome and Opera with the -webkit- prefix, and it's only support the x descriptors. Pretty sure that:

How to use srcset and sizes for responsive images

阅读更多关于 How to use srcset and sizes for responsive images

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. 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 of the browser So, greater Pixel density and/or higher Zoom level results in higher Device-pixel ratio .

Is it possible to see which srcset image a browser is using with browser developer tools

阅读更多关于 Is it possible to see which srcset image a browser is using with browser developer tools

I've been trying to see which srcset image my browser is using via the browsers developer tools, but apart from using the network tab to see which image it fetches i can't tell. Using the network tab would usually be fine, but sometimes I've noticed that it will fetch 2 image versions at different sizes, this would happen if one break point is at 600 and another at 900 and the browser was currently at 750px wide. (Ive tried this both on Chrome & FireFox, and it seems chrome will pull down both images in certain cases, but FireFox seems to only ever pull down one) The reason I want to know is I

订阅 srcset