Javascript 在 CSS 中使用 Max-width 按比例缩放图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2076284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scaling Images Proportionally in CSS with Max-width
提问by waiwai933
Right now, I'm using max-width to scale images to fit. However, they don't scale proportionally. Is there a way to cause this to happen? I'm open to Javascript/jQuery.
现在，我正在使用 max-width 缩放图像以适合。但是，它们不会按比例缩放。有没有办法导致这种情况发生？我对 Javascript/jQuery 持开放态度。
If possible, is there a way to do this without knowing the original dimensions of the image (maybe determine this using Javascript/jQuery)?
如果可能，有没有办法在不知道图像原始尺寸的情况下做到这一点（也许使用 Javascript/jQuery 确定）？
回答by Chris Redford
Contrary to the accepted answer, you can do this without specifying the size in the HTML. It can all be done in CSS:
与接受的答案相反，您可以在不指定 HTML 大小的情况下执行此操作。这一切都可以在 CSS 中完成：
#content img {
max-width: 100px;
width: 100%;
height: auto;
}
回答by Doug Neiner
You need to specify the original width and height:
您需要指定原始宽度和高度：
<img src="/whatever" width="100" height="200" alt="Whatever" />
And then use something like this in the CSS:
然后在 CSS 中使用类似的东西：
#content img { max-width: 100%; height: auto }
You could try this with jQuery if you don't have the width and height up front, but your mileage may vary:
如果您没有前面的宽度和高度，您可以使用 jQuery 尝试此操作，但您的里程可能会有所不同：
$(function(){
$('#content img').load(function(){
var $img = $(this);
$img.attr('width', $img.width()).attr('height', $img.height());
});
});
Obviously replace #contentwith whatever selector you want to scope the functionality to.
显然，替换#content为您想要将功能范围限定到的任何选择器。
回答by dfens
when setting up constant width use:
设置恒定宽度时使用：
height: auto
回答by Truman Leung
Here's how to do it with no Javascript. Set your max-widthto the length you want.
以下是不使用 Javascript 的方法。设置成你max-width想要的长度。
#content img {
max-width: 620px;
height: auto;
}
This worked for me tested on a Mac with Firefox 28, Chrome 34 and Safari 7 when I had no width or height settings explicitly set in the imgtags.
当我没有在img标签中明确设置宽度或高度设置时，这对我在带有 Firefox 28、Chrome 34 和 Safari 7 的 Mac 上进行了测试。
Don't set your width in CSS to 100% after the max-widthsetting as one person suggested because then any images that are narrower than the width of the container (like icons) will be blown up much larger than desired.
不要max-width按照某人的建议将CSS 中的宽度设置为100%，因为那样任何比容器宽度窄的图像（如图标）都会被放大到比预期大得多。
回答by Matti Virkkunen
I had to do this with the following requirements:
我必须满足以下要求：
- Page must not get reflown when images load. The image sizes are known on the server side and calculations can be made.
- Images must scale proportionally
- Images must not be wider than the containing element
- Images must not be scaled up, only down when necessary
- Must use an img element and not a background to make sure the images also print properly
- No JavaScript!
- 加载图像时不得重排页面。图像大小在服务器端是已知的，并且可以进行计算。
- 图像必须按比例缩放
- 图像不得宽于包含元素
- 图像不得放大，仅在必要时缩小
- 必须使用 img 元素而不是背景以确保图像也能正确打印
- 没有 JavaScript！
The closest I came up with is this terrible contraption. It requires three elements and two inline styles, but as far as I know this is the best way to scale images proportionally. All the height: auto;suggestions here negate the point of specifying the image dimensions on the server side and cause the content to jump around while loading.
我想到的最接近的是这个可怕的装置。它需要三个元素和两个内联样式，但据我所知，这是按比例缩放图像的最佳方式。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/- The "Hello" is there so you can see if the content after the image jumps around.
https://jsfiddle.net/Lqg1fgry/6/- “你好”在那里，所以你可以看到图像后的内容是否跳跃。
回答by elchinsolo
hopefully it is not too late , but with this pease of code i managed to get proportional images in my gallery. it will take time to understand what is going on but try it and enjoy.
希望现在还为时不晚，但是通过这种简单的代码，我设法在我的画廊中获得了成比例的图像。了解正在发生的事情需要时间，但请尝试并享受。
<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>
回答by BPM
Using both width and max-width on the image screw up IE8.
在图像上同时使用 width 和 max-width 会搞砸 IE8。
Put the width on your image and wrap it in a div that has the max-width. (Then curse MS.)
将宽度放在图像上并将其包装在具有最大宽度的 div 中。（然后诅咒MS。）
回答by meera
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);
}
