CSS - 防止图像放大？

在我的CSS，我目前使用这样的：CSS - 防止图像放大？

img.info { 
    max-width: 620px; 
    max-height: 800px; 
}

不幸的是，当我的形象小于max-width和max-height，它就会被放大的。我认为标准的行为是不会发生缩放的，但显然情况并非如此。有什么办法可以防止图像变大吗？

编辑：我发现问题的根源，它在于我的程序完全不同的部分。我上面发布的代码工作得很好。对不起这篇不必要的文章！

来源

2010-08-29 ryyst

你能提供的信息：（a）这是什么浏览器？（b）原始图像大小是多少，以及显示的是什么（放大）图像大小？（正如Timwi所说，你可以使用Firebug做到这一点） – syockit 2010-08-29 12:48:45

嗯，或许你可以删除它，如果你认为它没有教育意义？ – syockit 2010-08-29 14:02:22

它工作得很好，用下面的极简例如：

<style> 
    img.a { 
     max-width: 640px; 
     max-height: 640px; 
    } 
</style> 

<img src="(my local image file)" class="a">

图像不会被放大。当然，如果我也添加width和height属性。因此，请检查是否有任何可能适用于您的图像的其他CSS属性。您可以使用Firebug来确定哪些CSS属性适用于您的图像。

来源

2010-08-29 12:23:11 Timwi

我喜欢用蜻蜓。 http://www.opera.com/dragonfly/ – 2010-08-29 12:28:09

我想我知道你的意思。我假设你有一个给定的空间，并且想用图片填充它。图片不应该被挤压或拉伸，但空间应该填充？

那么这可能是您的解决方案的第一部分：

div.info { 
    width: 620px; 
    height: 640px; 
    overflow: hidden; 
} 
 
<div class="info"><img class="info" src="http://www.sjphoto.com/hk-web/images/HK-skyscraper.jpg" width=640 /> </div>

你现在能做的就是一个onload事件处理程序添加到您传递所需的高度，然后缩放你的形象和内部定位它的图像div，所以它被平均裁剪。这可能看起来像这样（未经测试）：

function scaleUp(el,height) { 
    if(el.height < height) { 
     var oldwidth = el.width; 
     el.deleteAttribute('width'); 
     el.height=height; 
     el.style.marginLeft=((oldwidth-el.width)/2)+'px'; 
    } else if(el.height > height) { 
     el.style.marginTop = '-'+((el.height-height)/2)+'px'; 
    } 
}

来源

2010-08-29 12:51:50

CSS - 防止图像放大？

回答

相关问题