iresults/responsive-images

维护者

详细信息

github.com/iresults/responsive-images

源代码

问题

安装: 9

依赖: 0

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 0

公开问题: 0

类型:typo3-cms-extension

0.1.0 2023-08-31 14:53 UTC

GPL-2.0 0ef44ccd432b64a53fb853d72b329478255cfa11

  • Daniel Corn <daniel.woop@iresults.li>

This package is auto-updated.

Last update: 2024-09-04 14:31:49 UTC

README

本扩展提供响应式图片的视图助手。

安装

composer require iresults/responsive-images

示例用法

输入

<html
  xmlns:iresultsResponsiveImages="http://typo3.org/ns/Iresults/ResponsiveImages/ViewHelpers"
  data-namespace-typo3-fluid="true"
>
  <iresultsResponsiveImages:responsiveImage
    image="{project.imageFile}"
    widths="
             (max-width: 414px) 378px,
             (max-width: 575px) 540px,
             (max-width: 1399px) 546px,
             634px"
    pixelDensities="1,2"
  />
</html>

输出

<picture>
  <source
    srcset="image-path-378px.jpg, image-path-378px.jpg 2x"
    media="(max-width: 414px)"
  />
  <source
    srcset="image-path-540px.jpg, image-path-540px.jpg 2x"
    media="(max-width: 575px)"
  />
  <source
    srcset="image-path-546px.jpg, image-path-546px.jpg 2x"
    media="(max-width: 1399px)"
  />
  <source srcset="image-path-634px.jpg, image-path-634px.jpg 2x" media="" />
  <img src="image-path-634px.jpg" width="634" height="633" alt="" />
</picture>