CODEWITHSUNDEEP
javascripthtmlcss
basitmate
basitmate

Reputation: 81

Get image height and change the image container height to auto

I'm trying to determine the height of images in containers and if any image has a height of less than 300 pixels then I want its container height to be set to auto.

Here is my code:

<style>
.container {
    width: 500px;
    height: 500px;
}    
</style>

<script>
var img = document.getElementsByTagName("img");
if (img.height < 300) {
    var x = document.getElementsByClassName('container');
    x.style.height="auto";
}
</script>

<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="250" width="250" src="/some_img.jpg"/> // This image height is less than 300 pixels.
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>

Any help would be appreciated.

Upvotes: 1

Views: 1074

Answers (3)

Moob
Moob

Reputation: 16184

Vanilla JS

Iterate over the images. If they are <300 and their parent has the class of 'container' then set the parent's style.height to '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";
    }
}


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 class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/" />
</div>
<div class="container">
    <img height="250" width="250" src="http://www.placehold.it/250/250/"/><!--This image height is less than 300 pixels.-->
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>

jQuery

Use jQuery's filter() to simply find all .containers that contain images with a height < 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;
}  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/" />
</div>
<div class="container">
    <img height="250" width="250" src="http://www.placehold.it/250/250/"/><!--This image height is less than 300 pixels.-->
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>

Upvotes: 0

Lukas
Lukas

Reputation: 817

  1. img = getElementsByTagName("img") returns all images, not just one, so you can't use it as img.height, you should use for loop or jQuery selector
  2. x = document.getElementsByClassName('container') also returns all elements, so you can't set its style directly. And you need to set style for parent element of current processed image, not just first or all of them. You can use jQuery .parent()
  3. Your script is executed before the img elements begin to exist. Either put you script after html or use jQuery $(document).ready() event
  4. I think you should put a dot before slash in src (src="./some_img.jpg")

So with jQuery it will look like this:

<script>
$(document).ready(function(){
    $("img").each(function(){
        if( $(this).height() < 300 ) {
            $(this).parent().height( "auto" );
        }
    });
});
</script>

Upvotes: 0

shakirthow
shakirthow

Reputation: 1366

First you get all image tags, then itterate through them, if their height is less than 500, then you get its parent element and set its height to 'auto' here is a working example

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

Upvotes: 2

Related Questions