圖像縮放「太晚」，當不居中（在Windows調整大小）

我沒有找到關於此的任何信息。可能是因爲我的方法不正確。圖像縮放「太晚」，當不居中（在Windows調整大小）

我讓我的圖像完全位於使用完整窗口寬度的div下。我使用的是margin-left: 30%，因此圖像始終位於距左邊框30％的位置。其他一切都設置爲響應圖像處理..

我得到的代碼正確，它縮放像我想要的，如果瀏覽器窗口得到調整。 但由於圖像不居中，縮放發生「太遲」，所以右側部分將隱藏在視圖的外部。

我可以用「更早」開始縮放解決這個問題嗎？或使用不同於邊距的東西：左邊：30％或左邊：30％？

在這裏看到：JsFiddle - Image out of view when resizing window

img.aaa 
{ 
    position: absolute; 
    max-width: 85%; 
    max-height: 85%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin-top: auto; 
    margin-right: auto; 
    margin-bottom: auto; 
    margin-left: 30%; 
}

來源

2014-02-22 JuliaWatanabe

您可以使用margin-left: auto將中心的形象。如果它必須與左側有一定的距離，請使用容器div和以下css。這將防止圖像從身體外面被切斷。

.container { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    padding-left: 30%; 
    //text-align: center; //remove padding and uncomment this to center image in div 
} 
img.aaa { 
    max-width: 100%; 
    max-height: 85%; 
    box-shadow: 0 5px 10px rgba(0,0,0,0.8); 
}

DEMO

來源

2014-02-22 20:34:45 brouxhaha

感謝。這工作。但這樣，我不再讓圖像垂直居中。一個提示？ – JuliaWatanabe

這工作，但似乎是矯枉過正：[在容器中使用餘量]（http://jsfiddle.net/sYv9r/7/） – JuliaWatanabe

而我發現，這也有點解決了這個問題，但因爲我想設置css陰影，它工作不夠好：[填充 - 在img-class中留下]（http://jsfiddle.net/sYv9r/8/）。好處是，它不需要容器div。此外，我需要這與所有瀏覽器兼容;） - 不確定。 – JuliaWatanabe

圖像縮放「太晚」，當不居中（在Windows調整大小）

回答

相關問題