javascript - 将图像标准化为div

Question

我正在使用 Bootstrap，我想将一些照片放入我的 div 中，我希望它们都具有相同的大小(“标准化”)。

如果它们太大(并且它们将永远如此)我想调整它们的大小以适合我的 div 并在必要时裁剪它们。

目前她就是我的工作:

我试图在函数中更改 jQuery 中图像的样式:

• 如果高度大于宽度，我将样式切换为 max-width: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");         
  } 
}

这里有一个 Fiddle 可以让你看得更清楚:https://jsfiddle.net/Baldrani/DTcHh/9801/

Answer 1

简单

我在画廊等工作中使用的 CMS 中经常这样做。我使用的方法涉及一个名为 imgLiquid.js 的 jQuery 库。

这会将内联图像转换为父 div 上的背景图像。这很好，因为你可以达到你想要的效果。它将裁剪图像(因为它在技术上成为背景图像)并将应用 background-size: cover; 和 background-position: center center; 作为内联样式。

You can find the plugin here

要初始化您只需要的插件:

$(".myele").imgLiquid();

开销

该插件非常小(大约 5.106 KB)，因此您无需担心增加页面重量。这真的是我遇到过的最简单的方法(使用从服务器端生成的缩略图的栏 - 请参阅底部的注释)。

提示 CSS

我已经对此进行了全面测试，发现它的效果非常好。然后你可能会问......我的父 div 发生了什么(从技术上讲插件隐藏了 img 元素 - 因此这意味着父元素不知道自己的高度)。

一种让事情响应式或不响应式工作的简单方法:

.myelement:before{
    content: "";
    padding-top: 50%;
    display: block;
}

此 CSS 会将您的高度返回给包装元素。所以如果你想要特定的比例，你可以使用这个数学:

h/w * 100 = 填充顶部的百分比。

Working Example

小记

从技术上讲，如果我有控制权，我建议只使用缩略图。我假设您正在使用某种系统，从技术上讲，它可以只渲染图像的缩减版本？我使用此方法(并建议使用此方法)的原因是我无法控制 CMS，并且我假设您只想管理未声明的正在生成的代码。