如何在css中容器小於一定寬度時調整圖像窗口的大小

Question

我有一個1920像素寬的圖像。當寬度大於1024像素時，我希望它在瀏覽器窗口中顯示居中和裁剪。當瀏覽器寬度小於1024時，圖像應居中並裁剪爲1024像素，然後調整爲瀏覽器寬度。

我不知道如何做到這一點，並沒有在互聯網上找到任何解決方案。 任何人都可以告訴我如何做到這一點，或指出我的例子？

Answer 1

我不完全相信你有什麼做的，但我認爲你在尋找的是： max-width

http://www.w3schools.com/cssref/pr_dim_max-width.asp

Answer 2

可以使用object-fit屬性：

.image-wrapper { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    > img { 
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
     object-position: 50% 50%; 
    } 
} 

HTML

<div class="image-wrapper"> 
    <img src="" /> 
</div> 

Answer 3

使用媒體查詢可以實現您正在尋找的內容。以下僅是一個例子。希望你可以繼續。

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
    } 
} 

當您調整瀏覽器大小並且瀏覽器寬度小於480px時，此處背景顏色將會改變。