以最大宽度在CSS中按比例缩放图像
现在，我使用最大宽度缩放图像以适应。 但是，它们不能按比例分配。 有没有办法导致这种情况发生？ 我打开Javascript / jQuery。
如果可能的话，有没有办法做到这一点，而不知道图像的原始尺寸（也许使用Javascript / jQuery确定）？
你需要指定原始的宽度和高度：
<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()); }); });
显然，将#contentreplace为您希望将function范围扩展到的任何select器。
与接受的答案相反，您可以在不指定HTML大小的情况下执行此操作。 它可以在CSS中完成：
#content img { max-width: 100px; width: 100%; height: auto; }
设置恒定宽度时使用：
height: auto
这里是如何做到这一点，没有Javascript。 将你的max-width设置为你想要的长度。
#content img { max-width: 620px; height: auto; }
这工作对我来说，在没有明确设置img标签的宽度或高度设置的情况下，在Firefox 28，Chrome 34和Safari 7的Mac上进行testing。
max-width设置后，不要将max-width设置为100％，因为之后任何窄于容器宽度（比如图标）的图像都会被炸得比预期的大得多。
使用图像的宽度和最大宽度搞砸IE8。
将宽度放在图像上，并将其包装在具有最大宽度的div中。 （然后诅咒MS。）
我必须按照以下要求做到这一点：
- 加载图像时，页面不得重新渲染。 图像大小在服务器端是已知的，可以进行计算。
- 图像必须按比例缩放
- 图片不得超过包含的元素
- 图像不能放大，只有在必要时才放下
- 必须使用img元素而不是背景来确保图像也能正确打印
- 没有JavaScript！
我想到的最接近的是这个可怕的装置。 它需要三个元素和两个内联样式，但就我所知，这是按比例缩放图像的最佳方式。 所有的height: auto; 这里的build议否定了在服务器端指定图像尺寸的要点，并导致内容在加载时跳转。
.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/ – “你好”在那里，所以你可以看到图像后跳转的内容。
希望是不是太晚了，但有了这个代码我设法得到在我的画廊成比例的图像。 了解正在发生的事情需要花费一些时间，但是尝试一下并享受。
<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>
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); }
