移除图像标签中的"height"和"width"属性。

Question

移除图像标签中的"height"和"width"属性。

htmlcontent-management-systemtypo3responsive-designtyposcript

12

为了使用Typo3和Twitter Bootstrap创建响应式网站，我希望去除图片的height和width属性。

以下是通过类型为text & image和image的内容元素在前端生成图像的方式。

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

我希望移除尺寸属性并得到如下结果：

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

有人可以帮我吗？

- alienlebarge

如果您使用jQuery，那么请查看此链接：http://api.jquery.com/removeAttr/ - Felix Christy

12个回答

6

提示：无法使用typoscript删除此内容。在sysext/cms/tslib/class.tslib_content.php函数cImage中，width和height属性是硬编码的。（Typo3 4.7）

- Ivaldi

2

很遗憾开发人员需要花费很长时间才能摆脱Web 1.0的习惯。 - Mateng

6

使用 typoscript 无法删除图像属性的高度或宽度。

但是您可以使用 CSS 覆盖它，从而创建一个响应式网站。

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

- Christian Michael

我遇到了同样的问题，为了保持新图像的原始大小，必须删除旧属性的宽度和高度，可以使用jQuery方法在这里。通过在CSS中设置100% !important，您告诉浏览器将img大小设置为相对于其父级的100％，而不考虑其原始大小，我认为这不是正确的做法。 - Naga

5

使用 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");

- Mennan

我本来更喜欢使用typoscript解决方案。但我会在jQuery中测试它。我没有考虑过jQuery，我会去测试一下。 - alienlebarge

我建议使用jQuery，你不会后悔的。 - Mennan

3

这将成为TYPO3 6.2 LTS的可能性。请查看http://forge.typo3.org/issues/49723。

- witrin

3

为了消除固定宽度和/或高度属性的影响，而不实际删除这些属性，您可以在CSS定义中将其设置为“auto”：

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

我建议只对确实需要图片流动的img标签进行此项操作。这可以通过在img标签或任何周围标签中添加id或class来完成。

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

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

通常情况下，您只需要将高度设置回自动（auto），因为您的框架（例如Twitter Bootstrap）已经覆盖了宽度为100％。

- Jpsy

1

在我看来，这是最好的方法。不需要JavaScript，而且自适应缩放和最大宽度等功能仍然有效。谢谢！ - Ole

2

TypoScript用于从源代码中删除"width"和"height"属性。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
}

- Errol

1

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

以下是URL链接: 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>

- Mitch

1

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

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

在呈现图像的地方使用这个 stdWrap-TS。

- Martin Wunderlich

1

如果您的图像已经分配了一个id或其他唯一属性，您可以轻松地执行以下操作：

var myImg=document.getElementById('myImage');
myImg && myImg.removeAttribute('height') && myImg.removeAttribute('width');

- user2428118

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sundar · Accepted Answer

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

$('img').removeAttr('width').removeAttr('height');