问题描述:

I'm using jQuery and media queries to resize my images, it works great in Chrome and Safari, but Firefox doesn't seem to recognize the height value, and isn't resizing the image at all, just cropping it. I tried poking around with firebug but I'm not sure if its the CSS or the jQuery thats the problem.

The site has a responsive horizontal scroll layout. Originally I had based the image resizing off of a set width in each media query, and auto height. This required all the images to be the same width and cropped in some cases, so I changed it to a set height to allow for proportional resizing.

Chrome screenshot: http://lizbmorrison.net/chrome.png

Firefox screenshot: http://lizbmorrison.net/firefox.png

I found this post: works in chrome but not firefox - jquery but I'm not sure it applies to my situation.

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

});

});

I've only recently started writing my own JS so feel free to point out if theres a better way. Thanks for taking the time to look at this!

网友答案:

Just needed to add max-width and max-height to be on the safe side:

$(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);
});
});
相关阅读:
Top