如何将特色图像放入带有溢出的 div 中？答案

【问题标题】：How to fit featured image in to div with overflow?如何将特色图像放入带有溢出的 div 中？
【发布时间】：2015-10-29 21:35:27
【问题描述】：

我在http://mixchuti.cz/category/obrazky/ 上的缩略图有问题

我有一个超过 img 宽度大小 (250x250px) 的 div 和不同大小的特色图片。溢出很好，但我需要将图像高度或宽度设置为 div 的 100%，这取决于更高的参数。

有关我正在尝试的更多信息，这是我的工作代码：

<script>
$(function(){
$('.wp-post-image').ready(function() {

if ($(this).css('height') > $(this).css('width')) {
    $(this).css('width','100%')
} else {
    $(this).css('height','100%')
}
});
});
</script>

前面是经典的 WP 缩略图：

<?php if(has_post_thumbnail()):the_post_thumbnail('featured_post_image'); endif; ?>

【问题讨论】：

我不确定你在问什么，你想让图像适合 div 的大小吗？
是的，但只是更高的维度。由于溢出，其余图像将不显示。
$(this).css('width') 返回图像的宽度，查看 jquery doc 了解更多信息api.jquery.com/css 所以你不需要任何变量
我怀疑失败与您的选择器 $('.obimg img') 有关。您应该测试该函数是否被调用。例如。通过放置 console.log("do it");在你的 if 语句前面
我更改了代码（并编辑了这篇文章），但我不确定将控制台日志放在哪里。你能用这条线把上面的线复制过来吗？

标签： jquery html css wordpress

【解决方案1】：

您是否尝试将其他维度设置为自动？

<script>
$(function(){
$('.wp-post-image').ready(function() {

if ($(this).css('width') > $(this).css('height')) {
    $(this).css('width','100%');
    $(this).css('height','auto');
} else {
    $(this).css('height','100%');
    $(this).css('width','auto');
}
});
});
</script>

我加了几个分号，不知道你是不是故意漏掉的。

【讨论】：

我猜它是一个工作鳕鱼，但在将它粘贴到我的网站后什么也没发生。如果图像调用功能正确，我不确定如何尝试。
如何将高度设置为变量并将宽度设置为另一个（var imgheight = $('.wp-post-image').height(); 等等。比较高度和宽度。另外，是class ('.wp-post-image') 绝对正确？也可以在 document.ready 上运行它或设置一个函数名并调用它？
我对多个 cmets 感到抱歉，但您有没有机会尝试单独使用 CSS，将图像 (.wp-post-image) 的样式设置为 (max-width: 100%; max-height: 100%;)，较大的将填充一个轴，另一个将较小。我完全离开这里了吗？我认为这可能会解决您的问题。
我尝试了 document.ready 并且没有任何变化。此外，我将宽度 > 高度更改为高度 > 宽度，因为实际上较低的尺寸必须为 100%，而较高的尺寸是自动的，因此 div 不会显示整个图像。这就是你的第二条评论，我的“如果”错了。

【解决方案2】：

我们很多人都会同意，这需要直接从 CSS 脚本中修复，而不是使用 jQuery。要在 CSS 中进行这些更改，请参见下面的示例。

<style type="text/css">
.thumbnail{
    width: 250px;
    height: 250px;
    overflow: hidden;
}

.thumbnail img {
    height: auto ; 
    width: auto;
}
</style>

<div class="thumbnail">
    <img src="http://yourdomain.com/dir/imagename.png"  alt="" height="127" width="300">
</div>

【讨论】：