jQuery 图像调整大小适用于 Chrome 和 Safari，但不适用于 Firefox 12

Question

我正在使用 jQuery 和媒体查询来调整图像大小，它在 Chrome 和 Safari 中运行良好，但 Firefox 似乎无法识别高度值，并且根本不调整图像大小，只是裁剪它。我试着用 Firebug 四处寻找，但我不确定问题出在 CSS 还是 jQuery 上。

该站点具有响应式水平滚动布局。最初我根据每个媒体查询中的设置宽度和自动高度调整图像大小。这要求所有图像的宽度相同，并且在某些情况下会被裁剪，因此我将其更改为设定的高度以允许按比例调整大小。

Chrome 屏幕截图:http://lizbmorrison.net/chrome.png

Firefox 屏幕截图:http://lizbmorrison.net/firefox.png

我找到这篇文章:works in chrome but not firefox - jquery但我不确定它是否适用于我的情况。

HTML/PHP:

<div id="page-wrap"> 
...
<?php }
        foreach ( $attachments as $attachment ) { ?>
            <td>
            <div class="preview">
                <div class="post_image">
                    <a href="<?php echo wp_get_attachment_url( $attachment->ID, 'large' ); ?>" class="fancybox"  title="<?php echo $attachment->post_title; ?>">
                    <ul id="overlay">
                        <li><span>
                            <?php echo wp_get_attachment_image( $attachment->ID, 'postfull' ); ?>
                        </span></li>
                    </ul></a>
                </div>
            </div>
            </td>
    <?php } ?>
</div>

CSS:

#page-wrap {
   position: relative;
   float: left;
   padding-top: 190px;
   padding-left: 30px;
   z-index: 1;
   overflow: visible;
}
table, tr, td {
   margin: 0;
   padding: 0;
   border: 0;
   top: 0;
   left: 0;
}
table tr { 
   vertical-align: top; 
}
.preview {
   margin-right: 20px;
}
.post_image { 
   margin: 0;
   padding: 0;
   position: relative;
   float: left;
   display: inline;
}
.post_image img {
   width: auto;
   height: 100%;
   background-color: #000;
}
#overlay {
   position: relative;
   overflow: hidden;
   text-align: center;
}
/* 768px to 900px */
@media screen and (max-height: 910px) { .post_image { height: 480px; } }
/* 900px to 1050px */
@media screen and (min-height: 911px) and (max-height: 940px) { .post_image { height: 630px; } }
/* 1050px and above */
@media screen and (min-height: 941px) { .post_image { height: 660px; } }

jQuery:

$(document).ready(function() {
// Image overlay
$('#overlay span').bind('mouseover', function(){
    $(this).parent('li').css({position:'relative'});
    var img = $(this).children('img');
    $('<div />').text(' ').css({
        'height': img.height(),
        'width': img.width(),
        'background-color': 'black',
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'opacity': 0.4
    }).addClass("over").prepend('<div id="overlay"><div class="overlay_arrow">&#x25B6;</div></div>').bind('mouseout', function(){
        $(this).remove();
    }).insertAfter(this);
});
});

$(window).load(function() {
// Image width
$('.post_image').each(function() { 
    'use strict';
    var newW = ((($(this).find('img').width()) / ($(this).find('img').height())) * $(this).height()) + 'px';
    $(this).css('width', newW);
});
});

$(window).resize(function() {
// Image width
$('.post_image').each(function() { 
    'use strict';
    var newW = ((($(this).find('img').width()) / ($(this).find('img').height())) * $(this).height()) + 'px';
    $(this).css('width', newW);
});
});

我最近才开始编写自己的 JS，所以请随时指出是否有更好的方法。感谢您花时间看这个!

Answer 1

为了安全起见，只需要添加max-width 和max-height:

$(window).load(function() {
// Image widths
$('.post_image').each(function() { 
    'use strict';
    var newW = ((($(this).find('img').width()) / ($(this).find('img').height())) * $(this).height()) + 'px';
    var newH = $(this).height() + 'px';
    $(this).css('width', newW);
    $(this).find('img').css('max-width', newW).css('max-height', newH);
});
});

$(window).resize(function() {
// Image widths
$('.post_image').each(function() { 
    'use strict';
    var newW = ((($(this).find('img').width()) / ($(this).find('img').height())) * $(this).height()) + 'px';
    var newH = $(this).height() + 'px';
    $(this).css('width', newW);
    $(this).find('img').css('max-width', newW).css('max-height', newH);
});
});