时间戳

首页 > 解决方案 > 我需要我的表格中的图像遵循一些高度和宽度规则

css - 我需要我的表格中的图像遵循一些高度和宽度规则

问题描述

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

  1. 如果图像的高度大于 45px，那么我需要宽度为 170px 和高度以保持原始图像的纵横比。

  2. 如果图像高度小于或等于 45px，那么我需要高度为 45px，宽度为保持原始图像的纵横比。

讲数学和略带编码的语言：

如果 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 改变。

标签： csshtml

解决方案

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' );
    };
  });
});

推荐阅读