0

jQueryとメディアクエリを使用して画像のサイズを変更しています.ChromeとSafariではうまく機能しますが、Firefoxは高さの値を認識していないようで、画像のサイズをまったく変更せず、トリミングするだけです. 私はfirebugをいじってみましたが、問題がCSSなのかjQueryなのかわかりません。

このサイトは、レスポンシブな横スクロール レイアウトになっています。もともと私は、各メディアクエリで設定された幅と自動高さの画像サイズ変更に基づいていました。これには、すべての画像を同じ幅にし、場合によってはトリミングする必要があったため、比例したサイズ変更を可能にするために設定された高さに変更しました。

Chrome のスクリーンショット: http://lizbmorrison.net/chrome.png

Firefox のスクリーンショット: http://lizbmorrison.net/firefox.png

この投稿を見つけました: chrome では動作しますが、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 を書き始めたばかりなので、もっと良い方法があれば遠慮なく指摘してください。これを見てくれてありがとう！

4

1 に答える 1

0

追加して安全を確保する必要が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);
});
});
于 2012-06-04T10:32:10.660 に答える