lingo/silverstripe_respimage

允许在SilverStripe中轻松使用响应式图片（img.srcset）

维护者

详细信息

github.com/lingo/silverstripe_srcset

源代码

问题

安装: 76

依赖项: 0

建议者: 0

安全: 0

星级: 2

关注者: 2

分支: 1

开放性问题: 0

类型:silverstripe-module

2.5.0 2017-11-14 06:24 UTC

Requires

MIT bf9d0e34411f6b50365ef5a2c3db6a3d49fe96d0

  • Luke Hudson <lukeletters.woop@gmail.com>

This package is not auto-updated.

Last update: 2024-09-29 04:36:45 UTC

README

通过HTML5 img 标签的 srcset 属性，在SilverStripe模板中轻松使用响应式图片。

此属性的浏览器兼容性可以在以下链接查看 caniuse，但无论如何，都提供了一个polyfill（使用 npm install）以支持旧版浏览器。

请参阅完整文档

安装

通过composer

composer require lingo/silverstripe_respimage

使用方法

只需在您的图片上调用 Responsive 方法。您应该提供一个媒体查询作为参数。有关此属性的说明，请参阅此处。

<% if $FeaturedImage %>
	$FeaturedImage.Responsive("(max-width: 800px) 93vw, 45vw")
<% end_if %>

CSS

您可能还需要设置一些CSS，以便使图片能够很好地缩放，例如这样

img {
	width:  auto;
	height: 100%;
}

更多信息

如果需要向元素添加内联样式属性以使用响应式背景图片，您还可以使用 .BackgroundAttr 方法。