X-Picture tag
How do I make an x-picture tag?
The template for a picture tag Polymer polyfill. What is a x-picture tag? How do you make a x-picture tag? This script and codes were developed by Cory on 13 December 2022, Tuesday.
X-Picture tag Previews
X-Picture tag - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>X-Picture tag</title>
</head>
<body> <element name="ng-picture" attributes="src srcset title alt"> <template> <style> img { max-width: 100%; } </style> <content select="source"></content> <img src="{{ src }}" id="the" /> </template> <script> var src; Polymer.register(this, { ready: function () { var sources, img, findMatchedMedia, getDensity, getSrcFromElement; sources = this.getElementsByTagName('source'); img = this.$.the; getSrcFromElement = function (el) { var deviceRatio, src, srcs, srcset, imgDPR, min = 1, max = 1; if (el) { // src wins if it exists if (el.src) { return el.src; } else if (srcset = el.getAttribute('srcset')) { // next prefer srcset, parsed for pixel density //if window.devicePixelRatio is undefined assume dpr === 1 // When defined, win.dpr is always a number, therefore // it can be parsed as an int. // If it is < 1 (it never is) it should be treated as 1. // If it is a float, it will be floored. // If it is higher than the highest defined srcset, it will use // the highest defined srcset. deviceRatio = parseInt(window.devicePixelRatio, 10) || 1; srcs = srcset.replace(/^\s*|\s*$/g, '').split(','); for (var i = srcs.length - 1; i >= 0; i--) { src = srcs[i].split(' '); // return if we have an exact match if (src[1].match(deviceRatio + 'x')) { return src[0]; } // Prep for edge cases. imgDPR = (src[1]) ? parseInt(src[1].replace('x', ''), 10): 1; if (imgDPR > max) { max = [src[0], imgDPR]; } if (imgDPR < min) { min = [src[0], imgDPR]; } } // Edge case when dpr is out of range supplied in srcset. if (deviceRatio > max[1]) { return max[0]; } else if (deviceRatio < min[1]) { return min[0]; } } } else { // If there is no src or srcset on the element, no vaild url can exist return ''; } }; findMatchedMedia = function () { var source, i, len, media, mediaLess; /* * So the question is do we want the first matched media vis-a-vis <video>, * or the last match vis-a-vis CSS. I feel like the use of <picture> is more * akin in spirit to CSS than <video>. So to encourage a mobile first approach * have similar behavior to CSS media query behavior, the last match wins. */ // Backwards to return as early as possible on last source order match. for (i = sources.length-1; i >= 0; i-- ) { source = sources[i]; media = source.getAttribute('media'); if (window.matchMedia && window.matchMedia(media).matches) { console.log(media); return source; } else if (!media) { // If no media matches, then the last source with no media attr wins, // We can't break as there may be a media match up stream which always // wins over no media so don't overwrite the first medialess source. mediaLess = mediaLess || source; } } return mediaLess }; img.src = getSrcFromElement(findMatchedMedia()); window.addEventListener('resize', function (e) { img.src = getSrcFromElement(findMatchedMedia()); }); } }); </script>
</element>
</body>
</html>
| Developer | Cory |
| Username | uniqname |
| Uploaded | December 13, 2022 |
| Rating | 3 |
| Size | 2,573 Kb |
| Views | 24,288 |
Do you need developer help for X-Picture tag?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Cory (uniqname) Script Codes
| Name | Size |
| A Pen by Cory | 3,306 Kb |
| Memory Leak Demo | 2,074 Kb |
| Digital Clock | 1,897 Kb |
| CSA-React POC | 5,660 Kb |
| Randomly shuffle colors | 2,806 Kb |
| JS REPL | 5,216 Kb |
| Floating Labels | 2,238 Kb |
| A content slider | 2,374 Kb |
| React Carousel POC | 12,622 Kb |
| PictureTime | 3,565 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Slider css only | Armandobau | 2,161 Kb |
| Playing with FlexBox | _Billy_Brown | 3,162 Kb |
| Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
| BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
| Sticky Navbar | Phantomesse | 5,106 Kb |
| A Pen by Ben Babics | Benbabics | 2,957 Kb |
| Materializecss input form | Jasonchan | 1,443 Kb |
| The Monty Hall Problem | Melatonind | 4,360 Kb |
| AngularJS Animated Todo List | Ehaase | 2,975 Kb |
| Elephants Full screen site | Orrinward | 3,981 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!