从wp-Get-Attach中删除宽度和高度属性

时间:2012-11-15 作者:pepe

我在用这个http://www.ghosthorses.co.uk/production-diary/removing-inline-img-dimensions-for-responsive-wordpress-websites/ 删除图像的高度和宽度属性。一切都很好,只是因为图像没有高度,所以会弄乱砖石容器。如何仅将此筛选器应用于已确定的div id/类?

2 个回复
SO网友:Steve

使用wp\\u get\\u attachment\\u url($id)而不是wp\\u get\\u attachment\\u image(),您的运气可能会更好。看看WordPress codex 对于通话。

SO网友:kaiser

由于我猜你在追求什么(这是离题的),我将简要解释一下。。。

当图像具有空白宽度和高度属性(…)时,IE(版本6、7和8及其“兼容模式”下)将无法渲染该图像

因此,此代码在IE中不会生成图像:

<img src="logo.png" alt="company logo" width="" height="" />
但这将:

<img src="logo.png" alt="company logo" width="200" height="50" />
<支持>Source

“解决方案”

Here 是当前所有可用技术的电子表格。从这个电子表格中,你可以看到Harry Roberts 似乎是“最好的”(目前)。

简单总结:这个想法是设置一个图像,并用一个有背景图像的div环绕它。

<!-- HTML -->
<div class="r-img" style="background:url(link/to/large/version); width:[width-of-image]px; height:[height-of-image]px;">
    <img src="link/to/small/version" alt="" />
</div>

/* CSS */
.r-img img{
    /* Hide image off-screen on larger devices, but leave it accessible to screen-readers */
    position:absolute;
    left:-9999px;
}

/*--- RESPONSIVE ---*/
@media(max-width:480px){
.r-img{
    /* Remove styling from the div */
    background:none!important;
    width:auto!important;
    height:auto!important;
}
.r-img img{
    /* Bring smaller image back into view */
    position:static;
    max-width:100%;
}
不幸的是,大屏幕上的用户仍然会下载这两幅图像…

这是该解决方案的唯一相反之处。

结束

相关推荐

images within style sheet

我希望有人能在这方面帮助我,因为这已经开始让我抓狂了。我已经搜索了好几个小时,想找到一种在我的样式表中放置图像路径的方法,但一直没有找到。路径不能是绝对路径或“主题相关”路径。解决问题的唯一方法是在html文件中添加以下内容:<style type=\"text/css\"> #menu .menu-drop .menu-label { background: url(<?php echo get_template_directory_uri().