删除图像标签的“高度”和“宽度”属性
Posted
技术标签:
【中文标题】删除图像标签的“高度”和“宽度”属性【英文标题】：Remove attributes "height" and "width" of the image tag 【发布时间】：2012-06-16 08:50:49 【问题描述】：为了创建一个带有Typo3 和Twitter Bootstrap 的响应式网站，我想删除图像的height 和width 属性
这是通过 text & image 和 image
类型的内容元素在前端生成图像的方式<img src="typo3temp/pics/a625b79f89.jpg" />
我想删除维度属性并得到这个：
<img src="typo3temp/pics/a625b79f89.jpg" />
谁能帮帮我？
【问题讨论】：
如果 jquery 适合你，那么请看这个api.jquery.com/removeAttr 【参考方案1】：有一个使用 TYPOSCRIPT 的旧 TYPO3 的解决方案：
stdWrap
replacement
10
search = /\s+(width|height)="[^"]+"/
useRegExp = 1
replace =
在您的图像被渲染的地方使用这个 stdWrap-TS。
【讨论】：
【参考方案2】：对于 Typo3 6.2 以上，您可以设置自定义图像渲染布局 （sn-p 属于 TS setup）：
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的自定义布局（sn-p属于TS常量）：
styles.content.imgtext.layoutKey = mylayout
见https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html#cobj-image-layoutkey 有关 IMAGE cObject 的详细信息。
【讨论】：
我无法让它与 T3 7.6 一起使用 - 这两个脚本都放在我模板的 SETUP 部分吗？ @uTILLIty 我用提示编辑了答案，必须放置 sn-ps。【参考方案3】：这是一个非常简单的 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>
【讨论】：
【参考方案4】：它在 6.1 中不起作用：/ 但你可以使用 CSS：
img
display: block;
max-width: 100%;
height: auto;
【讨论】：
【参考方案5】：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
【讨论】：
【参考方案6】：要移除固定宽度和/或高度属性的效果而不实际移除这些属性，您可以在 CSS 定义中将它们设置回“自动”：
img
height: auto !important;
width: auto !important;
我建议只对真正需要图片流畅的 img 标签执行此操作。这可以通过将 id 或 class 添加到 img 标签或任何周围标签来完成。
例如如果您的流体图像位于具有“fluid_pics”类的包装器 div 中，您可以使用：
.fluid_pics img
height: auto !important;
width: auto !important;
通常您只需将高度设置回自动，因为您的框架（例如 Twitter Bootstrap）已经将宽度覆盖为 100%。
【讨论】：
在我看来这是最好的方法。不需要 javascript，自动缩放与 max-width 结合使用仍然有效。谢谢！【参考方案7】：如果您的图片分配了id 或其他唯一属性，您可以轻松做到这一点：
var myImg=document.getElementById('myImage');
myImg && myImg.removeAttribute('height') && myImg.removeAttribute('width');
【讨论】：
【参考方案8】：无法使用打字稿删除高度或宽度图像属性。
但您可以使用 CSS 覆盖它以创建响应式网站。
img
height:100% !important;
width:100% !important;
【讨论】：
我遇到了同样的问题，为了保持新图像的原始大小，要删除的旧属性的宽度和高度 jquery 方式是 [here][1] 通过设置 100% ！important在 css 中，您告诉浏览器将 img 大小设置为相对于其父级的 100%，而不管其原始大小如何，我认为这不是正确的方法 [1]：w3schools.com/jquery/html_removeattr.asp【参考方案9】：这将在 TYPO3 6.2 LTS 中实现。结帐http://forge.typo3.org/issues/49723。
【讨论】：
【参考方案10】：在 document.ready 函数中调用图像标签。
$('img').removeAttr('width').removeAttr('height');
【讨论】：
使用 Bootstrap，您可能还想同时将img-responsive 类添加到图像中。 $('img').removeAttr('width').removeAttr('height').addClass('img-responsive');【参考方案11】：
仅供参考：没有办法用打字稿删除它。 width 和 height 属性在 sysext/cms/tslib/class.tslib_content.php 函数 cImage 中硬编码。 （Typo3 4.7）
【讨论】：
可惜开发者花了这么长时间才摆脱 web 1.0 的习惯。【参考方案12】：使用 jquery
为您的图像对象设置一个 id：
<img src="typo3temp/pics/a625b79f89.jpg" id="myimage" />
$('#myimage').removeAttr("heigth").removeAttr("width");
这里是替代的 javascript 代码：
var myImage= document.getElementById("myimage");
myImage.removeAttribute("heigth");
myImage.removeAttribute("width");
【讨论】：
我更喜欢通过打字稿解决问题。但我将在 jQuery 中对其进行测试。我没有想到 jQuery。我会测试它。 我建议使用 jquery ，不会后悔以上是关于删除图像标签的“高度”和“宽度”属性的主要内容，如果未能解决你的问题，请参考以下文章