Safari（Win7）不會刷新具有最大高度屬性的img高度

我有一個顯示圖像的網格。每個圖像都應該適應細胞大小。Safari（Win7）不會刷新具有最大高度屬性的img高度

我使用這個CSS到圖像自動適應：

img { 
    max-width: 100%; 
    max-height: 100%; 
}

然後，當我調整包含圖像的格（單元）時，圖像應適應到div。它可以在Chrome/Firefox下正常工作。在Safari 5.1.7（Win 7）上，它在更改div的寬度時起作用，但對於高度不起作用。

我創建了一個示例情況下，這裏：http://jsfiddle.net/MNL29/7/

的height按鈕增加div的高度，width按鈕改變寬度和圖像不會Safari瀏覽器下調整大小。

爲什麼會發生這種情況，是否有解決方法（無Javascript）？

來源

2013-01-17 koopajah

新版本

div { 
    height: 100px; 
    width: 200px; 
    background: red; 
    position: relative; 
} 

img { 
    max-width: 100%; 
    max-height: 100%; 
    position: absolute; 
}

似乎是工作的預期。 Fiddle

來源

2013-01-17 13:56:26 Morpheus

沒有這個不行，請點擊這裏：http://jsfiddle.net/MNL29/12/它拉伸了圖像 – koopajah

所以你想讓圖像保持它的比例？ – Morpheus

是的。我想要在Safari（win7）下完成Chrome在我提供的jsfiddle上所做的工作。保持比例，儘可能在容器中增長並隨之增長/縮小 – koopajah

在某些瀏覽器{height：100％}表示100％取自父容器，其他瀏覽器將其解釋爲100％的窗口。用jQuery這樣做：

$("#1").click(function() { 
    var width = jQuery('div.A').width(); 
    var wWidth = jQuery(window).width(); 

    if (width+30 < wWidth) { 
    $("div.A").css("width", "+=30px"); 
    } else { 
    $("div.A").css("width", wWidth); 
    } 
}); 

$("#2").click(function() { 
    var height = jQuery('div.A').height(); 
    var wHeight = jQuery(window).height(); 

    if (height+30 < wHeight) { 
    $("div.A").css("height", "+=30px"); 
    } else { 
    $("div.A").css("height", wHeight); 
    } 
});

DEMO

來源

2013-01-17 13:15:40 algorhythm

謝謝，但它並沒有解決在Safari中的問題。你假設我的div高度高於窗口，但它不是你的JavaScript代碼總是做我的工作。 – koopajah

你的意思是圖像必須具有外部div的大小？像這樣？ http://jsfiddle.net/algorhythm/MNL29/9/但沒有拉伸圖像，對吧？ – algorhythm

是的，但您的示例拉伸了圖像。這就是爲什麼我使用'max-width'和'max-height'可以在Chrome/Firefox上使用，正如我所解釋的那樣，而不是在Safari上使用動態高度。你有沒有在Safari中測試我的jsfiddle來進行比較？ – koopajah

Safari（Win7）不會刷新具有最大高度屬性的img高度

回答

相關問題