Görüntüte kalmak için görüntüyü yeniden boyutlandırın

Question

Görüntü kapsayıcıdan daha büyükse, ancak kapsayıcıdan daha küçükse yeniden boyutlandırmıyorsanız, görüntüyü yeniden boyutlandırma ve kapsayıcının içinde kalmak için en boy oranını nasıl koruyabilirim?

Görüntünün genişliği, kabın genişliğinden daha büyükse, aşağıdaki kod geçerli olmalıdır.

img { 
    width: 100%; 
    height: auto; 
} 

Görüntünün genişliği kabın genişliğinden küçükse, aşağıdaki kod geçerli olmalıdır.

img { 
    width: auto; 
    height: 100%; 
} 

Aşağıdaki kodu kullanarak çalıştı, ancak görüntü genişliği kabın genişliğine sonra daha büyük olduğunda bazı garip şeyler olur. Aşağıdaki CSS ile çözüldü

img_w = parseInt($("#img").css("width")); 
screen_w = parseInt($(window).width()); 

img_w = parseInt($("#img").css("width")); 
screen_w = parseInt($(window).width()); 

if (img_w > screen_w) { 
    $("#img").css("width", screen_w + "px"); // like 100%; 
    $("#img").css("height", "auto"); 
} else { 
    $("#img").css("width", "auto"); 
    $("#img").css("height", "100%"); 
} 

Answer 1

Sorun:

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

Answer 2

Ben kodunuzu çalıştı ve burada sonucu görebilirsiniz: http://jsfiddle.net/g6rL3L5h/ Ben şimdi tamam ve çalışma olduğunu düşünüyorum.

Sadece css'nizdeki 'html' yi siliyorum.

body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    } 

Buna ihtiyacınız var mı?