Question

在我的CSS中，我目前正在使用它：

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

不幸的是，当我的图片小于max-width和max-height时，它会升级。我认为标准行为是不会发生缩放，但显然，情况并非如此。有没有办法防止图像升级？

编辑：我发现了问题的根源，它与我的程序完全不同。我上面发布的代码工作得很好。对不起，这个不必要的帖子！

Answer 1

使用以下极简主义示例可以正常工作：

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

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

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

Answer 2

我想我知道你的意思。我是否正确地假设您有一个给定的空间并想要用图片填充它。图片不应该挤压或拉伸，但空间应该填满？

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

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';
    }
}

CSS - 防止图像升级？

2 个答案: