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

Question

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

Answer 1

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

Answer 2

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

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

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

Answer 3

向所有图片添加额外 class 的一种简便方法是使用 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}" />

将 class img-responsive 添加到所有图像，如果您在后端为图像选择边框，它也会添加 img-缩略图 class.

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

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
        }
    }
}

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

How to add max-width to all images in TYPO3?

typo3

typo3-7.6.x