Question

有没有办法让所有图像自动包含最大宽度，以便它们永远不会超过其原始分辨率？

Answer 1

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

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

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

Answer 2

为所有图片添加额外课程的一种便捷方法是使用 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 3

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

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

3 个答案: