566E
首页 包列表 提交包 常见问题 关于

承接 iresults/responsive-images 相关项目开发

从需求分析到上线部署，全程专人跟进，保证项目质量与交付效率

邮箱：yvsm@zunyunkeji.com | QQ：316430983 | 微信：yvsm316

iresults/responsive-images

Composer 安装命令：

composer require iresults/responsive-images

包简介

README 文档

README

This extension provides a view helper for responsive images.

Installation

composer require iresults/responsive-images

Examples

Simple

<iresultsResponsiveImages:responsiveImage
    image="{jpegImageFile}"
    widths="
              (max-width: 414px) 378px,
              (max-width: 575px) 540px,
              (max-width: 1399px) 546px,
              634px"
    pixelDensities="1,2"
/>
<picture>
    <source
        width="378"
        height="252"
        type="image/jpeg"
        srcset="image-path-378px.jpg, image-path-378px-2x.jpg 2x"
        media="(max-width: 414px)"
    />
    <source
        width="540"
        height="360"
        type="image/jpeg"
        srcset="image-path-540px.jpg, image-path-540px-2x.jpg 2x"
        media="(max-width: 575px)"
    />
    <source
        width="546"
        height="364"
        type="image/jpeg"
        srcset="image-path-546px.jpg, image-path-546px-2x.jpg 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="634"
        height="422"
        type="image/jpeg"
        srcset="image-path-634px.jpg, image-path-634px-2x.jpg 2x"
    />
    <img src="image-path-634px.jpg" width="634" height="422" alt="" />
</picture>

With file extension "png"

<iresultsResponsiveImages:responsiveImage
    image="{jpegImageFile}"
    widths="
              (max-width: 414px) 378px,
              634px"
    pixelDensities="1,2"
    fileExtension="png"
/>
<picture>
    <source
        width="378"
        height="252"
        type="image/png"
        srcset="image-path-378px.png, image-path-378px-2x.png 2x"
        media="(max-width: 414px)"
    />
    <source
        width="634"
        height="422"
        type="image/png"
        srcset="image-path-634px.png, image-path-634px-2x.png 2x"
    />
    <img src="image-path-634px.png" width="634" height="422" alt="" />
</picture>

With crop variant

<iresultsResponsiveImages:responsiveImage
    image="{jpegImageFile}"
    widths="
              (max-width: 414px) 378px,
              (max-width: 575px) 540px,
              (max-width: 1399px) 546px,
              634px"
    pixelDensities="1,2"
    cropVariant="1:1"
    fileExtension="jpg"
/>
<picture>
    <source
        width="378"
        height="378"
        type="image/jpeg"
        srcset="image-path-378px.jpg, image-path-378px-2x.jpg 2x"
        media="(max-width: 414px)"
    />
    <source
        width="540"
        height="540"
        type="image/jpeg"
        srcset="image-path-540px.jpg, image-path-540px-2x.jpg 2x"
        media="(max-width: 575px)"
    />
    <source
        width="546"
        height="546"
        type="image/jpeg"
        srcset="image-path-546px.jpg, image-path-546px-2x.jpg 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="634"
        height="634"
        type="image/jpeg"
        srcset="image-path-634px.jpg, image-path-634px-2x.jpg 2x"
    />
    <img src="image-path-634px.jpg" width="634" height="634" alt="" />
</picture>

With preferredFileExtension

<iresultsResponsiveImages:responsiveImage
    image="{jpegImageFile}"
    widths="
              (max-width: 414px) 378px,
              (max-width: 575px) 540px,
              (max-width: 1399px) 546px,
              634px"
    pixelDensities="1,2"
    preferredFileExtension="webp"
/>
<picture>
    <source
        width="378"
        height="252"
        type="image/webp"
        srcset="image-path-378px.webp, image-path-378px-2x.webp 2x"
        media="(max-width: 414px)"
    />
    <source
        width="378"
        height="252"
        type="image/jpeg"
        srcset="image-path-378px.jpg, image-path-378px-2x.jpg 2x"
        media="(max-width: 414px)"
    />
    <source
        width="540"
        height="360"
        type="image/webp"
        srcset="image-path-540px.webp, image-path-540px-2x.webp 2x"
        media="(max-width: 575px)"
    />
    <source
        width="540"
        height="360"
        type="image/jpeg"
        srcset="image-path-540px.jpg, image-path-540px-2x.jpg 2x"
        media="(max-width: 575px)"
    />
    <source
        width="546"
        height="364"
        type="image/webp"
        srcset="image-path-546px.webp, image-path-546px-2x.webp 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="546"
        height="364"
        type="image/jpeg"
        srcset="image-path-546px.jpg, image-path-546px-2x.jpg 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="634"
        height="422"
        type="image/webp"
        srcset="image-path-634px.webp, image-path-634px-2x.webp 2x"
    />
    <source
        width="634"
        height="422"
        type="image/jpeg"
        srcset="image-path-634px.jpg, image-path-634px-2x.jpg 2x"
    />
    <img src="image-path-634px.jpg" width="634" height="422" alt="" />
</picture>

Without media-queries and with preferredFileExtension

<iresultsResponsiveImages:responsiveImage
    image="{jpegImageFile}"
    widths="634px"
    pixelDensities="1,2"
    preferredFileExtension="webp"
    fileExtension="jpg"
/>
<picture>
    <source
        width="378"
        height="378"
        type="image/webp"
        srcset="image-path-378px.webp, image-path-378px-2x.webp 2x"
        media="(max-width: 414px)"
    />
    <source
        width="378"
        height="378"
        type="image/jpeg"
        srcset="image-path-378px.jpg, image-path-378px-2x.jpg 2x"
        media="(max-width: 414px)"
    />
    <source
        width="540"
        height="540"
        type="image/webp"
        srcset="image-path-540px.webp, image-path-540px-2x.webp 2x"
        media="(max-width: 575px)"
    />
    <source
        width="540"
        height="540"
        type="image/jpeg"
        srcset="image-path-540px.jpg, image-path-540px-2x.jpg 2x"
        media="(max-width: 575px)"
    />
    <source
        width="546"
        height="546"
        type="image/webp"
        srcset="image-path-546px.webp, image-path-546px-2x.webp 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="546"
        height="546"
        type="image/jpeg"
        srcset="image-path-546px.jpg, image-path-546px-2x.jpg 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="634"
        height="634"
        type="image/webp"
        srcset="image-path-634px.webp, image-path-634px-2x.webp 2x"
    />
    <source
        width="634"
        height="634"
        type="image/jpeg"
        srcset="image-path-634px.jpg, image-path-634px-2x.jpg 2x"
    />
    <img src="image-path-634px.jpg" width="634" height="634" alt="" />
</picture>

iresults/responsive-images 适用场景与选型建议

iresults/responsive-images 是一款 基于 PHP 开发的 Composer 扩展包，目前已累计 26 次下载、GitHub Stars 达 0， 最近一次更新时间为 2023 年 08 月 31 日， 在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 iresults/responsive-images 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 iresults/responsive-images 我们能提供哪些服务？
定制开发 / 二次开发

基于 iresults/responsive-images 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

统计信息

  • 总下载量： 26
  • 月度下载量： 0
  • 日度下载量： 0
  • 收藏数： 0
  • 点击次数： 2
  • 依赖项目数： 0
  • 推荐数： 0

GitHub 信息

  • Stars： 0
  • Watchers： 1
  • Forks： 0
  • 开发语言： PHP
访问仓库

其他信息

  • 授权协议： GPL-2.0
  • 更新时间： 2023-08-31