digitalunited/du-responsive-images

开发者的响应式图片

维护者

详情

github.com/digitalunited/du-responsive-images

主页

源代码

问题

安装量: 4,045

依赖关系: 0

建议者: 0

安全: 0

星级: 3

关注者: 4

分支: 0

公开问题: 0

类型:wordpress-plugin

0.0.15 2017-05-22 11:04 UTC

Requires

MIT bfcde95ff51de377279405cda2b131ca1d42456b

pluginwordpressResponsive Images

This package is not auto-updated.

Last update: 2024-09-28 17:17:57 UTC

README

##为什么？！ TODO

##如何？！ TODO

##库

##使用方法

\DigitalUnited\ResponsiveImage::render([
    'imgId' => $imgId,
    'output' => 'img'
    'ratio' => '4x3',
    'imgAttributes' => [
        'class' => [],
        'alt' =>  $alt,
    ],
    'wrapperAttributes' => [
        'class' => [],
    ],
    'divWithBgImageAttributes' => [
        'class' => ['cover']
    ]
]);

##选项

imgId

WordPress 附件图片 ID。

输出（尚未全部实现）

  • img: 普通img标签（尚未实现）
  • img: 包裹在具有保持宽高比的div中的普通img。如果省略了比例设置，img的行为正常。
  • div: 具有srcset的div
  • srcset: 用于"data-srcset"标签的用法

比例（可选）

以下宽高比可用。

  • 字符串 "1x1"
  • 字符串 "2x1"
  • 字符串 "4x1"
  • 字符串 "4x3"
  • 字符串 "16x9"
  • 字符串 "1x2"
  • 字符串 "1x4"
  • 字符串 "3x4"
  • 字符串 "9x16"

比例（仅在"output = img-ratio"或"output = img"时有效）

imgAttributes 和 wrapperAttributes（仅在"output = img"时有效）

当使用img输出模式时添加到包装div和img标签的HTML属性

divWithBgImageAttributes（仅在"output = div"时有效）

将div输出为div时，有两个预先制作的帮助类来避免内联样式，"cover"和"contain"。

##TODO

  • 渲染的缓存
  • 具有Bootstrap断点的比例
  • 使用printplugin为Lazysizes