以最大宽度按比例缩放图像

现在，我正在使用最大宽度缩放图像以适合。但是，它们不按比例分配。有没有办法导致这种情况发生？我开放给Javascript/jQuery。以最大宽度按比例缩放图像

如果可能，有没有办法做到这一点，而不知道图像的原始尺寸（可能使用Javascript/jQuery来确定）？

2010-01-16 waiwai933

你需要指定原始宽度和高度：

<img src="/whatever" width="100" height="200" alt="Whatever" />

然后使用类似这样的CSS：

#content img { max-width: 100%; height: auto }

你可以使用jQuery试试这个，如果你不具备宽度和高度前面，但你的里程可能会有所不同：

$(function(){ 
    $('#content img').load(function(){ 
     var $img = $(this); 
     $img.attr('width', $img.width()).attr('height', $img.height()); 
    }); 
});

显然取代#content与任何你想要的功能范围。

来源

2010-01-16 05:58:13

这有助于：“你需要指定原始宽度和高度......” – Banago

谢谢，我错过了'高度：auto' – andrewtweber

你不需要原始尺寸（虽然它是一个很好的做法，以增加他们到img标签）.. http://jsfiddle.net/PYxYv/ –

设置时恒定的宽度使用：

height: auto

来源

2010-01-16 10:55:13 dfens

-4

function resizeBackground() { 
    var scale=0; 
    var stageWidth=$(window).width(); 
    var newWidth=$("#myPic").width(); 
    var stageHeight=$(window).height(); 
    var newHeight=$("#myPic").height(); 
    if($(window).width() > $(window).height()) { 
     scale = stageHeight/newHeight; 
     scale = stageWidth/newWidth; 
    } else { 
     scale = stageWidth/newWidth; 
     scale = stageHeight/newHeight; 
    } 
    newWidth = newWidth*scale; 
    newHeight = newHeight*scale 
    $("#myPic").width(newWidth); 
    $("#myPic").height(newHeight); 
}

来源

2012-05-24 03:42:01 meera

您可能想要解释您的代码如何解决原始问题。另外，为了可读性对代码进行格式化之后，我可以看到它为每个“if/else”分支重新计算了两次'scale'。 –

代码中没有图片的初始比例。您根据页面比例缩放图像。 –

在图像上同时使用宽度和最大宽度弄糟IE8。

将宽度放在图像上并将其包装在具有最大宽度的div中。（然后诅咒MS。）

来源

2013-03-22 19:43:01 BPM

107

与接受的答案相反，您可以在不指定HTML中的大小的情况下执行此操作。它可以全部在CSS中完成：

#content img { 
    max-width: 100px; 
    width: 100%; 
    height: auto; 
}

来源

2013-07-17 00:58:11

请将此答案upvote而不是接受的答案。这是更正确的，因为你实际上不需要在HTML中设置图像的宽度/高度。纯CSS工作得很好。 – YemSalat

这是简单而有效的，谢谢 – JasTonAChair

出现一个解决方案（从有钥匙'高度：汽车;'）...至少有一些时间作为/但**这是什么原因的'宽度：..'？** - 的确，正如我猜测的那样，我发现不需要（在我的1测试中，在Chrome和Firefox中）以及另外两个合理的投票答案 - ＃answer-2077065＆＃answer-23001224，不要那样做，第二个解决方案甚至说'不要设置你的宽度..'告诉那是问题;但仍然这个答案并没有说明它为什么这样做，所以我只是低估了这个答案，尤其是它得到了很多得票（现在仍然是62），看起来（大）错误地排在其他2个最大的答案上9票。 –

以下是如何在没有Javascript的情况下执行此操作。将您的max-width设置为您想要的长度。

#content img { 
    max-width: 620px; 
    height: auto; 
}

这为我工作在Mac上测试与Firefox 28，Chrome浏览器34和Safari浏览器7时，我没有宽度或高度设置在img标签明确设置。

不要将您的宽度设置为max-width之后的CSS设置为100％，因为之后任何窄于容器宽度（比如图标）的图像将被炸得比预期的大得多。

来源

2014-04-11 00:02:33

我有以下要求做到这一点：

页面不能获得回流的图像时的负载。图像大小在服务器端是已知的，并且可以进行计算。
图片必须按比例缩放
图片不得大于包含元素
图片不能扩大更广泛，仅下跌必要时
必须使用img元素，而不是一个背景，以确保图像也打印正确
没有JavaScript！

我想出的最接近的是这个可怕的装置。它需要三个元素和两个内联样式，但据我所知这是按比例缩放图像的最佳方式。所有的height: auto;建议都否定了在服务器端指定图像尺寸的要点，并导致内容在加载时跳转。

.image { 
    position: relative; 
} 

.image img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

<!-- container element with max-width prevents upscaling --> 
<div class="image" style="max-width: 640px;"> 
    <!-- div with padding equal to the image aspect ratio to make 
     the element the correct height --> 
    <div style="padding-top: 75%;"></div> 
    <!-- img scaled to completely fill container --> 
    <img src="//placebear.com/640/480" /> 
</div>

https://jsfiddle.net/Lqg1fgry/6/ - 在“你好”是存在的，所以你可以看到，如果图像后的内容跳动。

来源

2016-03-14 14:56:18

希望它不是太晚，但与此代码的代码我设法得到在我的画廊成比例的图像。理解正在发生的事情需要一定的时间，但尝试并享受。

<style> 
div_base { 
    width: 200px; // whatever size you want as constrain unchangeable 
    max-width: 95%; // this is connected to img and mus exist 
} 
div_base img { 
    width: auto !important; // very important part just have it there! 
    height: 95%; // and this one is linked to maxW above. 
} 
</style>

来源

2016-04-25 05:52:39 elchinsolo

以最大宽度按比例缩放图像

回答

相关问题