由于我猜你在追求什么(这是离题的),我将简要解释一下。。。
当图像具有空白宽度和高度属性(…)时,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%;
}
不幸的是,大屏幕上的用户仍然会下载这两幅图像…
这是该解决方案的唯一相反之处。