使用 jQuery 增加每个横向图像的大小答案

【问题标题】：Increase every landscape image's size with jQuery使用 jQuery 增加每个横向图像的大小
【发布时间】：2016-05-10 03:30:31
【问题描述】：

我有一个基于网格的布局页面，其中包含横向或纵向图像（固定宽度为380px）。每次图像是横向时，我都想根据其宽度将其大小增加到480px（因此所有图像的方形像素区域更加相等）。

我不确定如何正确调用图像。它应该应用于<body class="blog">页面上的所有imgs。

而且我不确定如何重新定义宽度（通常由 CSS 定义）以及如何确保 w/h 比率保持不变。

这是目前的代码

var ArchiveImage = $(".blog img");
        if (ArchiveImage.width() > ArchiveImage.height()){
            //landscape
            ArchiveImage.width() = 480;
        } else if (ArchiveImage.width() < ArchiveImage.height()){
            //portrait
        } else {
            //square.
    }

【问题讨论】：

首先，您可能需要遍历所有img。即$(".blog img").each(function(i, item){ //resize code });

标签： jquery css image layout width

【解决方案1】：

由于您的所有图像都在 .blog 类中，因此使用 jQuery 调用它们将很容易。

$('.blog').find('img').each(function(){
    //your code goes here
    if ($(this).width() > $(this).height()){
        //landscape
        $(this).height() = (480 * $(this).height() / $(this).width());
        $(this).css('width','480');
    } else if ($(this).width() < $(this).height()){
        //portrait
    } else {
        //square.
});

只需使用find()，在.blog 内的所有img 中搜索。然后使用each() 为每个img 应用该函数。

希望对您有所帮助。

编辑：添加了简单的三规则来计算正确的高度。（感谢 mikeyq6）

【讨论】：

如果你这样做，你仍然需要设置高度。如果图片的高度有 CSS 规则，那么这张图片会被拉伸，因为宽度会改变，但高度不会改变。
我将代码粘贴到 <head> 的 <script>tag 中，那里已经有一些 jQuery 代码，触发了砌体效果。它打破了砌体效应。整个<script> 标签看起来像这样：pastebin.com/y83w6DhU 我该如何解决这个问题？
您需要更改 img 大小，因为这是砌体断裂。试试这样：pastebin.com/9kWn6wkf
它仍然以某种方式破坏了砌体效果......我认为它一定是图像调整代码中的东西，因为我尝试了另一个答案的代码并且没有破坏砌体效果，但它以某种方式将调整大小应用于所有图像，而不仅仅是风景图像。

【解决方案2】：

试试这个：

$(".blog img").each(function() {
    var max_width = 480;

    var width = $(this).width();
    var height = $(this).height();

    if (width > max_width) { // Only consider images wider than 480px
        if (width > height) {
          //landscape
          var newHeight = (max_width * height) / width;
          $(this).height(newHeight);
          $(this).width(max_width);
        } else if (width < height) {
          //portrait
        } else {
          //square.
        }
    }
});

我定义了一个变量来保存最大宽度：max_width，因为最好使用变量而不是“魔术”数字

检查整个语句，因此只考虑宽度超过 480 像素的图像。如果您想让较小的图像变大，您可以将其删除，尽管这通常会导致图像质量不佳。

此行根据现有宽度/高度和新宽度的比率计算高度 var newHeight = (max_width * height) / width

正如@zgood 所指出的，您可以只使用“auto”作为高度，因此您不需要进行高度计算，即：

$(this).height('auto');
$(this).width(max_width);

看working here:

【讨论】：

对于高度你能做到$(this).height = 'auto'; ??我相信auto 根据宽度和原始图像的纵横比设置高度。
嗨！谢谢，这确实有作用，但它以某种方式改变了 all 照片的大小。我知道，代码似乎对此非常严格，但无论是哪张照片，它们都具有相同的——更大的——宽度。
上面的代码也会让宽度小于480px的图片变大，是这个意思吗？在这种情况下，您需要先检查宽度。我会更新代码。