如何将溢出的特色图像放入div中？

Question

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>

and fronted是经典的WP缩略图：

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

Answer 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>

我添加了几个分号，不确定你是否故意将它们排除在外。

Answer 2

我们很多人都同意这需要直接从不使用jQuery的CSS脚本修复。要在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>