将图像标准化为div
我正在使用Bootstrap，我想将一些照片放入我的div，我希望它们都是相同的大小（“标准化”）。
如果它们太大（并且它们将永远是）， 我想调整它们以适合我的div，并在必要时裁剪它们 。
目前她是我的工作：
我试图在函数中改变jQuery中的图像样式：
•如果高度大于宽度，我将样式切换为最大宽度：100％和高度自动。
•如果宽度大于高度，则进行反演。
但我仍然对jQuery不熟悉，而且我可能做错了什么; 有人可以点灯吗？
这是我的jQuery
$(document).ready(function(){
photoResize();
$(window).resize(function(){
photoResize();
});
});
function photoResize(){
image_w = $('img').width();
image_h = $('img').height();
if(image_h > image_w)
{
$('img').css("max-width","100%");
$('img').height("auto");
}
else if(image_w > image_h)
{
$('img').css("max-height","100%");
$('img').width("auto");
}
}
这里是一个更好的观点小提琴：https://jsfiddle.net/Baldrani/DTcHh/9801/
简单
我经常在我们用于画廊等工作的CMS中经常这样做。我使用的方法涉及一个名为imgLiquid.js的jQuery库。
这会将内联图像转换为父div上的背景图像。 这很好，因为你可以达到你想要的效果。 它会裁剪图像（因为它在技术上成为背景图像）并将应用background-size: cover; 和background-position: center center; 作为内联样式。
你可以在这里找到插件
要初始化您只需要的插件：
$(".myele").imgLiquid();
管理费用
该插件非常小（大约在5.106 KB左右），因此您无需担心为页面添加重量。 这真的是我遇到的最简单的方法（使用从服务器端生成的缩略图来查看 - 请参阅底部的注释）。
提示CSS
我已经彻底地测试过，发现它给出了很好的结果。 然后你可能会问......我父母divs会发生什么（从技术上说，插件隐藏了img元素 - 这意味着父元素不知道自己的高度）。
一种简单的方法来使事情响应或不响应：
.myelement:before{
content: "";
padding-top: 50%;
display: block;
}
这个CSS会让你的高度回到包装元素。 所以，如果你想要一定的比例，你可以使用这个数学：
h / w * 100 =填充顶部的百分比。
工作示例
小笔记
从技术上讲，如果我有控制，我建议只使用缩略图..我假设你使用某种系统，可以在技术上只是渲染削减版本的图像？ 我使用这种方法的原因 - 并建议它 - 是我不能控制CMS，我假设你只是想管理正在生成的代码，因为它没有说明。
如果你想让你的图像尺寸相同，那么你不需要任何JavaScript或计算，为什么不把它设置在CSS？
.someUniqueContainer img{
width:300px;
height:300px; // or what ever height you want
}
我猜测，实际上你实际上想把所有图像裁剪到一个设定的宽度/高度。 如果是这种情况，你需要一个服务器端脚本。
图像来自哪里？ 只需编辑它们就可以了。 如果他们来自用户，那么您将在文件上传时在服务器上调整/裁剪
你的代码有几处错误。 请看这个jsfiddle，请参阅https://jsfiddle.net/DTcHh/9796/
$(document).ready(function () {
photoResize();
$(window).resize(function () {
photoResize();
});
});
function photoResize() {
image_w = $('img').width();
image_h = $('img').height();
if (image_h > image_w) {
$('img').css("max-width", "100%");
$('img').height("auto");
} else if (image_w > image_h) {
$('img').css("max-height", "100%");
$('img').width("auto");
}
}