Question

我正在尝试制作一个wordpress主题，所以我的代码是：

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

当高度大于宽度时，宽度= 100％，高度=自动; 当宽度大于高度时，高度：100％，宽度=自动;

我试图用javascript做到这一点，但它没有用！

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

任何解决方案！

Answer 1

为什么在使用CSS时使用jQuery？

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

包含auto部分是因为旧版本的Firefox不会查看min-声明，除非常规声明是明确的。

Answer 2

您可以将图像设置为背景图像并使用背景幕

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

Answer 3

试试这段代码

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

当JQuery的高度大于宽度时，图像宽度为100％

3 个答案: