この問題に対する jQuery ソリューションを見つけた可能性があります。
この jsFiddel を確認してください。
または、ここでオンラインの例を確認してください
ここで私がしていることは、ページの読み込みが完了したら、.box コンテナーに対してすべての画像をチェックして、必要な CSS スタイルを判断することです。できあがり、画像はコンテナに合わせて流動的にスケーリングされます。次のステップは、画像を div コンテナ内の中央に配置することです。
コードがクロスブラウザ用に適切に記述されているかどうかを確認する機会があれば、それは本当に素晴らしいことであり、他の人もそれを使用する可能性があります:)。ご協力ありがとうございます。
ハッピー:D マッツ
jQuery コード:
$(window).load(function() {
plottingData();
resizeImage();
});
$(window).resize(function() {
plottingData();
resizeImage();
});
function plottingData(){
var image = $('.box img');
var divW = $(".box").width();
var divH = $(".box").height();
var imgW = image.width();
var imgH = image.height();
$('.outputText').html('DIV CONTAINER W: '+divW+ ' H: ' +divH +' :: imgW: '+imgW +' : imgH: ' +imgH) ;
}
function resizeImage(){
$("img").each(function(){
var maxWidth = $(".box").width();; // Max width for the image
var maxHeight = $(".box").height();; // Max height for the image
var maxratio=maxHeight/maxWidth;
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
var curentratio=height/width;
// Check if the current width is larger than the max
if(curentratio>maxratio)
{
ratio = maxWidth / width; // get ratio for scaling image
/*
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height *ratio); // Scale height based on ratio
*/
$(this).css("width", "100%");
$(this).css("height", "auto");
}
else
{
/*
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
*/
$(this).css("width", "auto");
$(this).css("height", "100%");
}
});
}