10

为了使用Typo3和Twitter Bootstrap创建一个响应式网站，我想删除图像的高度和宽度属性

这是通过文本和图像和图像类型的内容元素在前端生成图像的方式

<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" />

我想删除维度属性并得到这个：

<img src="typo3temp/pics/a625b79f89.jpg" alt="blaba" />

谁能帮我 ？

4

12 回答 12

10

在 document.ready 函数中调用图像标签。

$('img').removeAttr('width').removeAttr('height');
于 2012-06-13T12:56:43.893 回答
6

仅供参考：没有办法用打字稿删除它。widthandheight属性在sysext/cms/tslib/class.tslib_content.phpfunction中是硬编码的cImage。（Typo3 4.7）

于 2012-06-13T15:00:33.660 回答
4

使用 jQuery

为您的图像对象设置一个 id：

<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" id="myimage" />

$('#myimage').removeAttr("height").removeAttr("width");

这是替代的javascript代码：

var myImage= document.getElementById("myimage");
myImage.removeAttribute("heigth");
myImage.removeAttribute("width");
于 2012-06-13T11:49:43.240 回答
4

无法使用打字稿删除高度或宽度图像属性。

但是您可以使用 CSS 覆盖它以创建响应式网站。

img { height:100% !important; width:100% !important; }

于 2014-02-01T19:18:15.853 回答
3

这将在 TYPO3 6.2 LTS 中实现。结帐http://forge.typo3.org/issues/49723。

于 2013-09-12T18:03:15.690 回答
3

要删除固定宽度和/或高度属性的效果而不实际删除这些属性，您可以在 CSS 定义中将它们设置回“自动”：

img {
    height: auto !important;
    width: auto !important;
}

我建议只对真正需要图片流畅的 img 标签执行此操作。这可以通过将 id 或 class 添加到 img 标签或任何周围标签来完成。

例如，如果您的流体图像位于具有“fluid_pics”类的包装器 div 中，您可以使用：

.fluid_pics img {
    height: auto !important;
    width: auto !important;
}

通常你只需要将高度设置回自动，因为宽度已经被你的框架覆盖为 100%（例如 Twitter Bootstrap）。

于 2014-10-02T17:45:07.310 回答
2

TypoScript 从源代码中删除“宽度”和“高度”属性。TYPO3 CMS 6.1+。

tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

tt_news 示例：新闻列表

plugin.tt_news.displayList.image.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}
于 2015-04-06T03:47:52.843 回答
1

如果您的图像id分配了一个或另一个唯一属性，您可以轻松地做到这一点：

var myImg=document.getElementById('myImage');
myImg && myImg.removeAttribute('height') && myImg.removeAttribute('width');
于 2012-06-13T12:22:06.150 回答
1

对于 Typo3 6.2 以上，您可以设置自定义图像渲染布局（片段属于 TS 设置）：

tt_content.image.20.1 {
    layout {
        mylayout {
            # equals default rendering, except width and height removed
            element = <img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###BORDER### ###SELFCLOSINGTAGSLASH###>
        }
    }
}

启用 css_styled_content 的自定义布局（片段属于 TS 常量）：

styles.content.imgtext.layoutKey = mylayout

有关 IMAGE cObject 的详细信息，请参阅https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html#cobj-image-layoutkey 。

于 2015-09-14T07:36:28.803 回答
1

使用 TYPOSCRIPT 对旧的 TYPO3 有一个解决方案：

stdWrap {
    replacement {
        10 {
            search = /\s+(width|height)="[^"]+"/
            useRegExp = 1
            replace =
        }
    }
}

在渲染图像的地方使用这个 stdWrap-TS。

于 2016-10-04T12:51:22.813 回答
0

它在 6.1 中不起作用：/ 但你可以使用 CSS：

img {
    display: block;
    max-width: 100%;
    height: auto;
}
于 2015-04-07T13:51:36.977 回答
0

这是一个非常简单的 jQuery 解决方案。我在 wpwizard.net 找到了答案。

这是网址： http ://wpwizard.net/jquery/remove-img-height-and-width-with-jquery/

这是jQuery：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){

    $('img').each(function(){ 
        $(this).removeAttr('width')
        $(this).removeAttr('height');
    });

});
</script>
于 2016-03-11T14:32:26.580 回答