javascript 调整窗口大小时修改图像大小 (jQuery)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21134853/
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
Modify image size when window is resized (jQuery)
提问by Michael Ruta
I'm trying to resize images when a page is loaded and when the browser is resized. Some images will be portrait and some landscape, and they will be in a container div that also may be portrait/landscape (depending on browser size). It doesn't matter if the image should be stretched to fill the box (either 100% width or 100% height) and if the ratio's do not match then clipping will occur (through CSS overflow:hidden).
我正在尝试在加载页面和调整浏览器大小时调整图像大小。一些图像将是纵向的，一些是横向的，并且它们将位于也可能是纵向/横向（取决于浏览器大小）的容器 div 中。图像是否应该被拉伸以填充框（100% 宽度或 100% 高度）并不重要，如果比例不匹配，则会发生剪裁（通过 CSS overflow:hidden）。
My method was to get the ratio of the container box (ie portrate or landscape) and get the image ratio (portrait or landscape), compare them and adjust the CSS width/height accordingly.
我的方法是获取容器框的比例（即纵向或横向）并获取图像比例（纵向或横向），比较它们并相应地调整CSS宽度/高度。
Note: all the containers will have a class of mr_our-dest-img-containerand will all only contain 1 img element (and some different elements).
注意：所有容器都将有一个类，mr_our-dest-img-container并且都只包含 1 个 img 元素（和一些不同的元素）。
Here is the code I have, which doesn't work. It doesn't do anything, and I can't figure it out. Could anyone help me fix this?
这是我的代码，它不起作用。它没有任何作用，我无法弄清楚。谁能帮我解决这个问题？
$(document).ready(function () {
updateImageSize();
$(window).resize(function() {
updateImageSize();
});
});
function updateImageSize() {
$(".mr_our-dest-img-container").each(function(){
var ratio_cont = jQuery(this).width()/jQuery(this).height();
var $img = jQuery(this).find("img");
var ratio_img = $img.width()/$img.height();
if (ratio_cont > ratio_img)
{
$img.css({"width": "100%", "height": "auto"});
}
else if (ratio_cont < ratio_img)
{
$img.css({"width": "auto", "height": "100%"});
}
}
};
采纳答案by qqfish
It is an syntax error just as the console said. You miss a )after the eachfunction end.
正如控制台所说，这是一个语法错误。你)在each函数结束后错过了一个。
function updateImageSize() {
$(".mr_our-dest-img-container").each(function(){
var ratio_cont = jQuery(this).width()/jQuery(this).height();
var $img = jQuery(this).find("img");
var ratio_img = $img.width()/$img.height();
if (ratio_cont > ratio_img)
{
$img.css({"width": "100%", "height": "auto"});
}
else if (ratio_cont < ratio_img)
{
$img.css({"width": "auto", "height": "100%"});
}
}); //missing )
};
