Мне нужно, чтобы мои изображения в таблице соответствовали некоторым правилам высоты и ширины.

Question

Я получаю изображения из бэкэнда, поэтому я не знаю, какого они размера, но мне нужно, чтобы они следовали некоторым правилам:

1. Если высота изображения превышает 45 пикселей, тогда мне нужно, чтобы ширина составляла 170 пикселей и высота , чтобы поддерживать соотношение сторон исходного изображения .

2. Если изображение высота меньше или равно 45px, тогда мне нужно, чтобы height было 45px и width , чтобы сохранить соотношение сторон оригинала изображение.

Говорим математически и немного кодирую язык:

если image.height> 45px, тогда finalImage.width = 170px, а finalImage.height соответствует соотношению сторон исходного изображения.

если image.height <= 45px, то сделать finalImage.height = 45px и изменить finalImage.width в соответствии с соотношением сторон исходного изображения. </p>

Я попробовал некоторый код, но он не меняет ширину, если высота <= 45px. </p>

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

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

Этот код изменяет ширину в соответствии с соотношением сторон и не заботится о высоте, т. Е. Даже если высота <= 45 пикселей; его ширина захвата 170px. Но я хочу, чтобы ширина изменялась в соответствии с тем же соотношением сторон и высотой = 45px. </p>

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, так и изображению, чтобы 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">'
    }
}