CSS -防止图像升级？

jmp7cifd 于 2023-05-30 发布在其他

关注(0)|答案(3)|浏览(82)

在我的CSS中，我现在使用的是：

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

不幸的是，当我的图像小于max-width和max-height时，它会被放大。我以为标准行为是不会发生缩放，但显然，事实并非如此。有什么方法可以防止图像放大吗？
编辑：我找到了问题的根源，它存在于我程序的一个完全不同的部分。我上面写的代码运行得很好。对不起，这篇文章不必要！

css

来源：https://stackoverflow.com/questions/3594679/css-prevent-image-upscaling

3条答案

按热度按时间

eufgjt7s1#

下面是一个极简的例子：

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

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

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

赞(0）回复(0）举报 2023-05-30

r8uurelv2#

我想我明白你的意思。我是否正确地假设你有一个给定的空间，并想用一张图片来填充它。图片不应该被挤压或拉伸，但空间应该被填充？
那么这可能是你解决方案的第一部分：

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

赞(0）回复(0）举报 2023-05-30

g2ieeal73#

这应该可以了