当高度大于 JQuery 的宽度时，图像宽度 100 %答案

【问题标题】：image width 100 % when the height larger than the width with JQuery当高度大于 JQuery 的宽度时，图像宽度 100 %
【发布时间】：2014-03-15 18:59:16
【问题描述】：

我正在尝试制作一个 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');}
);
},
});

任何解决方案！

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

既然可以使用 CSS，为什么还要使用 jQuery？

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

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

【讨论】：

当我这样做时，宽度图像或高度图像会太大，.post-thumb { overflow:hidden; } 所以图片的很大一部分不会显示
哦，您不是在寻找全面覆盖，而是在寻找包含类型的设置？然后将min 切换为max！我会修改我的答案。

【解决方案2】：

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

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

【讨论】：

【解决方案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');
}

【讨论】：