typo3 - 如何为 TYPO3 中的所有图像添加最大宽度？

Question

有没有办法让所有图像自动包含一个最大宽度，这样它们就永远不会大于它们的原始分辨率？

Answer 1

为所有图像添加额外类的一种便捷方法是使用fluid_styled_content而不是css_styled_content，然后覆盖默认的流体模板部分。

如果您想尝试使用根模板记录中的常量编辑器设置以下内容

styles.templates.partialRootPath = any/path/to/your/partial/folder

然后将文件MediaGallery.html从typo3/sysext/fluid_styled_content/Resources/Private/Partials 复制到您的部分文件夹。现在 TYPO3 使用您的 MediaGallery.html 部分文件进行渲染，您可以自由更改渲染中的任何内容。例如：

<f:media file="{column.media}" class="img-responsive{f:if(condition: data.imageborder, then: ' img-thumbnail')}" width="{column.dimensions.width}" height="{column.dimensions.height}" alt="{column.media.alternative}" title="{column.media.title}" />

将类img-responsive添加到所有图像，如果您在后端为图像选择了边框，它还将添加img-thumbnail类。

您可能还想查看以下常量：

styles {
    content {
        textmedia {
            # maximum width of generated images
            maxW = 920
            # maximum width of generated images (beside text)
            maxWInText = 400
            # column spacing in pixels for multiple image columns
            columnSpacing = 10
            # row spacing in pixels for multiple image rows
            rowSpacing = 10
            # spacing to the text
            textMargin = 10
        }
    }
}

Answer 2

当然有一种方法...使用 CSS，如果您使用的是 Twitter Bootstrap 3+，只需将类添加img-responsive到您的所有图像（通过 TypoScript 或底部的 JavaScript 行）。

你也可以在你的样式表中使用这个定义，只要确保它不会被 TYPO3 覆盖（使用浏览器检查器工具检查它）：

img {
    display: block;
    max-width: 100%;
    height: auto;
}

Answer 3

图像在处理过程中不会放大。如果它们看起来比它们的原始分辨率大，你应该检查你的样式。