親divの幅にイメージのサイズを変更する信頼性の高いjqueryコードを作成するには、本当に問題があります。ときどき時にはうまくいきません。最初はIEはちょうど私を盗んでいますが、サファリ、ファイアフォックス、またはクロムが私の方法をも発射していない時があります。jquery data()メソッドは必ずしも機能していませんか?
$(".post-body img").each(function() {
$(this).data('width', $(this).width());
$(this).data('height', $(this).height());
});
私はwindow.load - functionにデータメソッドの幅と高さの幅を保存します。
その後、私はsetimgwidth()関数を呼び出しています。
function setimgwidth() {
var bw = $('.post-body').width();
$(".post-body img").each(function() {
if (bw < $(this).data('width')) {
$(this).attr('width', Math.round(bw));
//calculate ratio height
var newHeight = (bw/$(this).data('width')) * $(this).data('height');
$(this).attr('height', Math.round(newHeight));
}
});
}
ので、私は、親のdivは、その中の画像よりも小さい場合、画像は、親のdivの幅にリサイズする必要がありますチェックしています。
このメソッドが常に動作していない理由はわかりません。場合によっては、画像のサイズが変更されることもあります。
奇妙なことがありますか?あなたは何か良いことをするだろうか? いくつかの他の方法?
は
編集ありがとう:
jQuery(function($){//document ready
$(window).load(function(){
//Save the original image width
$(".post-body p img, .post-body .wp-caption img").each(function() {
$(this).data('width', $(this).width());
$(this).data('height', $(this).height());
});
//window resize event
$(window).resize(function() {
setimgwidth();
});
//set image width inside of .post-body
function setimgwidth() {
$(".post-body p img, .post-body .wp-caption img").each(function() {
console.debug($(this).data('width'));
console.debug($(this).data('height'));
});
}
//call image-resize functions onload
setimgwidth();
});
});//document ready
コンソールは常に画像の幅と高さは、あなたが$(this).attr('width');
を使用している一つの場所で0
も 'window.load'で' setimgwidth'と呼ばれていますか? – Emmett
はい!もし私がconsole.debug($(this).data( 'width'))を使用していれば、時には0の時もありますが、実際のサイズです。私はちょうどそれがいつも働いていない理由を得ることができません。私が望むものにもっと良い方法があるのだろうか? – matt