CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
user3215332
user3215332

Reputation: 23

image width 100 % when the height larger than the width with JQuery

I'm trying to make a wordpress theme ,so my code is :

<div class="post-thumb">
<?php echo get_the_post_thumbnail(); ?> 
</div>

i would when the height is bigger than the width , the width=100% , height=auto; and when the width is bigger than the height , the height:100% , width=auto;

i have tried to do that with javascript , but it didn't work !

var landscape = $(".post-thumb img ").css('width');
var portrait = $(".post-thumb img ").css('height');

if (landscape > portrait){
$(".post-thumb img").height('100%') .width('auto');}
else {
$(".post-thumb img").width('100%') .height('auto');}
);
},
});

any solution !

Upvotes: 1

Views: 2174

Answers (3)

Sangeetha Mani
Sangeetha Mani

Reputation: 71

try this code

var landscape = $(".post-thumb img ").width();
var portrait = $(".post-thumb img").height();
if (landscape > portrait)
{
   $(".post-thumb img").height('100%') .width('auto');
}
else 
{
   $(".post-thumb img").width('100%') .height('auto');
}

Upvotes: 0

Amy Leaman
Amy Leaman

Reputation: 318

You could set the image as a background image and use background-cover

.post-thumb{
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16359

Why use jQuery when you can use CSS?

.post-thumb-img {
    height:auto;
    width:auto;
    max-width:100%;
    max-height:100%;
}

The inclusion of the auto pieces are because older versions of Firefox don't look at min- declarations unless the regular declarations are explicit.

Upvotes: 1

Related Questions