如何在保持CSS寬高比的同時調整圖像大小？

我有一個大的圖像。我想在自己的網頁上顯示它，並且在沒有任何CSS的情況下執行此操作時，它會填充整個頁面，並且太大而不能立即顯示（出現滾動條）。我想縮小它以適應用戶屏幕的高度（而不是寬度）。我找到了解決方案，但是這些圖像適合整個屏幕 - 我不想要這樣做，因爲它會破壞長寬比。如何在保持CSS寬高比的同時調整圖像大小？

基本上，我想在保持寬高比的同時調整圖像大小。我該怎麼做呢？

來源

2012-09-07 user1447941

http://stackoverflow.com/questions/10559058/resize -view-width-preserve-image-aspect-ratio-with-css –

只需指定高度並保持width屬性不變。 – knittl

這是一個已經解決的重複話題。 https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container –

只需設置width到auto：

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

這裏的小提琴：http://jsfiddle.net/6Y5Zp/

來源

2012-09-07 15:09:20

如何自動調整高度以適應最佳縱橫比取決於圖像的大小？ – user1447941

@ user1447941 - 上面的代碼確實如此。 –

如果你想調整寬度：寬度：100％和高度：自動代替 – speeder

可以使用帶有背景圖像的DIV並設置背景大小：包含：

div.image{ 
    background-image: url("your/url/here"); 
    background-size:contain; 
    background-repeat:no-repeat; 
    background-position:center; 
}

現在，您可以將您的div大小設置爲任何您想要的大小，而且不僅圖像保持其縱橫比，它也將同時集中垂直和水平。只要不要忘記在CSS上設置尺寸，因爲div在標籤本身沒有寬度/高度屬性。

雖然background-size屬性是ie> = 9。

來源

2013-05-30 13:59:37 Hoffmann

我認爲你需要粘貼要顯示這樣

< image class="image" >

圖像中的一類，這是類

.image 


text align: center 
max width:pixels you want 
max height pixels you want

但要確保兩者相同數量這種方式不會離開屏幕的高度和寬度。

，或者你可以用寬度和高度

來源

2013-06-05 02:56:20 jose

這裏玩的是一個樣品

div{ 
 
    width: 200px; 
 
    height:200px; 
 
    border:solid 
 
} 
 

 
img{ 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: contain; 
 
    }

<div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png"> 
 
</div>

來源

2015-02-22 11:21:22

這是最簡單的解決方案，但請注意，IE不支持對象適合的屬性。 – cytsunny

顯然甚至沒有IE 11或Edge 15支持：http://caniuse.com/#feat=object-fit – Grav

如何在保持CSS寬高比的同時調整圖像大小？

回答

相關問題