試圖保持圖像大小一致用不同的屏幕分辨率

Question

所以我建立一個網站，這是假設有一個形象的幻燈片 我已經爲它設置一個div：

<div id="slideshow"> 
</div> 

與其對應的CSS：

#slideshow { 
    position: absolute; 
    height: 28%; 
    width: 99.9%; 
    top: 10.5%; 
    margin: 0; 
} 

我一直試圖找到合適的圖像尺寸，以適應DIV，所以它不會在不同的屏幕不同的顯示出來。我試圖找到一個不必要的大圖像，以便它可以「縮小」到div使用height: 100%和width: 100%

但它總是在我測試的兩個屏幕不一致，通常太拉伸。一個屏幕的分辨率爲1336x768，其他1920x1080。 如何讓圖像在不同的屏幕上改變比例？ （我想到一個橫幅，以及它如何在每個屏幕上始終保持一致，而不會伸展）

Answer 1

通常，在使用任何種類的響應式設計來處理多種屏幕分辨率時，請使用以下內容。

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

這也將確保圖像保持正確的寬高比。