在Chrome和Safari浏览器中使用jQuery图像调整大小，但不支持Firefox 12

Question

我使用jQuery和媒体查询来调整图像大小，它在Chrome和Safari中运行良好，但Firefox似乎无法识别高度值，根本不调整图像的大小，只是裁剪它。我试着用萤火虫探索，但我不确定它的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); 
}); 
});