Получите высоту изображения и измените высоту контейнера изображения на авто

Я пытаюсь определить высоту изображений в контейнерах, и если какое-либо изображение имеет высоту менее 300 пикселей, тогда я хочу, чтобы высота его контейнера была установлена на авто.

Вот мой код:

<div>
 // This image height is less than 300 pixels.
</div>

Любая помощь будет оценена по достоинству.

3 ответа

Сначала вы получаете все теги изображений, а затем повторяете их, если их высота меньше 500, тогда вы получаете свой родительский элемент и устанавливаете его высоту на "авто", вот рабочий пример

var img = document.getElementsByTagName("img");
console.log(img)
for (index in img){
 if (img[index].height < 300) {
 img[index].parentNode.style.height="auto";
 }
}


  1. img = getElementsByTagName("img") возвращает все изображения, а не только одно, поэтому вы не можете использовать его как img.height, вы должны использовать для цикла или jQuery селектора
  2. x = document.getElementsByClassName('container') также возвращает все элементы, поэтому вы не можете напрямую установить его стиль. И вам нужно установить стиль для родительского элемента текущего обработанного изображения, а не только для первого или всех из них. Вы можете использовать jQuery .parent()
  3. Ваш скрипт выполняется до того, как элементы img начнут существовать. Либо поставьте скрипт после html, либо используйте событие jQuery $(document).ready()
  4. Я думаю, вы должны поставить точку перед слэш в src (src="./some_img.jpg")

Итак, с jQuery это будет выглядеть так:


Vanilla JS

Итерации по изображениям. Если они <300, а их родительский класс имеет класс "контейнер" , то установите родительский стиль.

var imgs = document.getElementsByTagName("img"); for (i in imgs){ if (imgs[i].height < 300 && imgs[i].parentNode.className.indexOf('container') !=-1) { imgs[i].parentNode.style.height="auto" ; } }

var imgs = document.getElementsByTagName("img");
for (i in imgs){
 if (imgs[i].height < 300 && imgs[i].parentNode.className.indexOf('container') != -1) {
 imgs[i].parentNode.style.height="auto";
 }
}
.container {
 width: 500px;
 height: 500px;
}
<div>
 <!--This image height is less than 300 pixels.-->
</div>

JQuery

Используйте jQuery filter() чтобы просто найти все .container, содержащие изображения с высотой <300:

$(".container") .filter(function(){return $(this).find("img").height() < 300;}) .css("height", "auto" );

$(function(){
 $(".container").filter(function(){return $(this).find("img").height() < 300;}).css("height", "auto");
 });
.container {
 width: 500px;
 height: 500px;
}
<div>
 <!--This image height is less than 300 pixels.-->
</div>

licensed under cc by-sa 3.0 with attribution.