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);
});
});

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

1 个答案: