使用窗口大小縮放居中圖像

img.logo { 
    height: auto; 
    width: auto\9; /* ie8 */ 
    left: 50%; 
    margin-top: -250px; 
    margin-left: -134px; 
    position: absolute; 
    top: 50%; 
    resize: both;

這就是我正在使用的代碼。這是調整大小和集中的組合，但它只是出於某種原因而集中。我需要對圖像進行縮放，因爲就目前而言，它以非常小的瀏覽器尺寸與頁面的上部元素重疊。使用窗口大小縮放居中圖像

來源

2014-06-26 user3780718

根據上下文，你可以考慮設置基於媒體查詢圖像分辨率斷點 – agrm

如何？我爲任何無知道歉，我不是貿易的編碼員。 – user3780718

您可以嘗試使用CSS媒體查詢是這樣的。基本上我們根據屏幕寬度/瀏覽器寬度定義斷點，並相應地調整圖像寬度。

img { 
    width: auto; 
    height: auto; 
} 
@media all and (max-width: 600px) { 
    img { width: 500px; } 
} 
@media all and (max-width: 500px) { 
    img { width: 400px; } 
} 
@media all and (max-width: 400px) { 
    img { width: 300px; } 
} 
@media all and (max-width: 300px) { 
    img { width: 200px; } 
} 
@media all and (max-width: 200px) { 
    img { width: 100px; } 
}

See this example

希望這能滿足您的需求

編輯： 你甚至可以用transform: translateX(-50%) translateY(-50%);結合上述建議，始終保持居中的圖像。例如：

img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: auto; 
    height: auto; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
} 
@media all and (max-width: 600px) { 
    ... 
} 
...

Here's an example

來源

2014-06-26 19:38:03 agrm

謝謝！這裏的縮放效果很好，但圖像不居中（水平和垂直）。 – user3780718

您可以添加或調整更多選項/屬性，而不僅僅是寬度，如上例所示。例如，您可以使用您的問題中的CSS作爲基礎，然後使用@media查詢來調整寬度和邊距/位置，以確保圖像保持居中 – agrm

已更新答案以包含使圖像保持居中的方式 – agrm

使用簡單的％來實現圖像的寬度和高度，其餘部分會自動處理。我認爲這裏的重疊是因爲圖像試圖保持與auto屬性的比例。

否則，你可以嘗試在CSS

img.resize{ 
    width:60%; /* Use either % or px*/ 
    height: auto; 
}

來源

2014-06-26 19:34:38 Geniusknight

重疊發生在沒有縮放時，只有居中。理想情況下，縮放將防止任何重疊，因爲居中圖像太小而不能與其上面的元素接觸。不過，我用百分比替換了我的寬度，圖片移動到了頁面的左側，沒有縮放。 – user3780718

解決這個問題的另一種方法是使用對不同顯示平臺使用媒體查詢的圖像的響應度 – Geniusknight

我認爲您的定位正在影響圖像的收費。嘗試改變他們與不同的位置：屬性。檢查這個例子https://developer.mozilla.org/en-US/docs/Web/CSS/position – Geniusknight

使用窗口大小縮放居中圖像

回答

相關問題