Question

我正在从后端获取图像，所以我不知道它们的大小，但是我需要它们遵循一些规则：

如果图像的 height 大于45px，则我需要 width 为170px和 height 来保持宽高比原始图像。
如果图像 height 小于或等于45px，则我需要 height 为45px和 width 来保持宽高比原始图像。

说些数学和稍微编码的语言：

如果image.height> 45px，则使finalImage.width = 170px，并且finalImage.height遵循原始图像的长宽比。

如果image.height <= 45px，则使finalImage.height = 45px并根据原始图像的长宽比更改finalImage.width。

我尝试了一些代码，但是如果高度<= 45px，它不会改变宽度。

<img class = "modify" src = "URL" />

.modify {
  min-height: 45px;
  width: 170px;
  height: auto;
}

此代码根据宽高比更改宽度，而不关心高度，即即使高度<= 45px；其宽度为170px。但是我希望宽度根据相同的宽高比而改变，高度= 45px。

Answer 1

CSS没有条件逻辑，因此您必须使用JS来解决：

/* class for images with height > 45px */
img.modify.gt45 {
  width: 170px;
  height: auto;
}

/* class for images with height <= 45px */
img.modify.lte45 {
  height: 45px;
  width: auto;
}

document.addEventListener("DOMContentLoaded", () => { 
  // get all images with "modify" class
  document.querySelectorAll('img.modify').forEach((img) => {
    // set "onload" event handler
    img.onload = function () {
      // add appropriate image class
      this.classList.add( this.height > 45 ? 'gt45' : 'lte45' );
    };
  });
});

Answer 2

好的。这不是一个非常优化的解决方案，但肯定可以。我猜你的HTML图像元素看起来像这样：

<img src="source/to/the/path.jpg">

首先，我将图像包装在div中，并为div和图像赋予唯一的ID，以使HTML变为：

<div id="image-container">
    <img src="source/to/the/path.jpg" id="image">
</div>

现在，我可以使用javascript这样操作图像了：

var img = document.getElementById('image');
img.onload = function() {
    var height = this.height;
    if (height > 45) {
        document.getElementById('image-container').innerHTML = '<img src="source/to/the/path.jpg" height="'+height+'px">'
    } 
    else {
        document.getElementById('image-container').innerHTML = '<img src="source/to/the/path.jpg" height="45px">'
    }
}

我需要桌子上的图像遵循一些高度和宽度规则

2 个答案: