Xiaoling pengmaradi
pengmaradi
/ Image.html
Created
August 7, 2017 10:47
— forked from mdbloch/Image.html
TYPO3 8.7 - Responsive Image
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true"> | |
| <picture> | |
| <source srcset="{f:uri.image(image: file, maxWidth: settings.maxImgWidth, cropVariant: 'default')}" media="(min-width: 1200px)"> | |
| <source srcset="{f:uri.image(image: file, maxWidth: '992', cropVariant: 'desktop')}, {f:uri.image(image: file, maxWidth: '1984', cropVariant: 'desktop')} 2x" media="(min-width: 992px)"> | |
| <source srcset="{f:uri.image(image: file, maxWidth: '768', cropVariant: 'tablet')}, {f:uri.image(image: file, maxWidth: '1536', cropVariant: 'tablet')} 2x" media="(min-width: 768px)"> | |
| <source srcset="{f:uri.image(image: file, maxWidth: '768', cropVariant: 'mobile')}, {f:uri.image(image: file, maxWidth: '1536', cropVariant: 'mobile')} 2x" media="(max-width: 767px)"> | |
| <!---Fallback---> | |
| <img class="img-responsive" src="{f:uri.image(image: file, maxWidth: settings.maxImgWidth, cropVariant: 'default')}" alt="{image.alternative}" longdesc="{image.description}" title="{image.title}"> | |
| </picture> |