圖像在響應式設計中伸展

我在不同尺寸的圖像。所有的圖像都很大。我需要在容器內沒有任何拉伸的情況下顯示圖像。那個容器有一定的高度。所以我已經展示了圖像適合容器內部沒有任何伸展。我需要在html中使用圖像而不是背景圖像。這裏是我的代碼圖像在響應式設計中伸展

.image-container { 
 
    height: 420px; 
 
    width: 100%; 
 
} 
 

 
@media (max-width: 480px) { 
 
    height: 310px; 
 
} 
 

 
@media (max-width: 375px) { 
 
    height: 275px; 
 
} 
 

 
@media (max-width: 320px) { 
 
    height: 240px; 
 
} 
 

 
.image-container img { 
 
    max-height: 100%; 
 
    object-fit: contain; 
 
    max-width: 100%; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div class="image-container"> 
 
    <img src="http://media.gettyimages.com/photos/under-the-tree-picture-id480585809" /> 
 
</div>

當我使用上面的代碼圖像被拉伸。有沒有什麼辦法解決這一問題？請爲此提出任何解決方案。

在此先感謝。

來源

2017-09-14 satheesh

只有要麼最大寬度或最大高度 - 這是一個常見問題，搜索它 – mplungjan

我不明白爲什麼你必須重新發明輪子，當有第三方CSS庫的引導可以爲你做到這一點的引導程序？ https://getbootstrap.com/docs/4.0/examples/grid/ –

你也錯過了關閉'.image-container'的div支架，即''' –

總是首先重置所有元素的邊距和填充。

* { 
    margin: 0; 
    padding: 0; 
}

如果高度或寬度是自動的，它不會拉伸/變異原始圖像。

.img-container { 
    width: 420px; // your width 
} 

.img-container img { 
    width: 100%; 
    height: auto; 
    display: block; 
}

刪除媒體查詢。你的語法不正確，正確的語法使用它們是：

@media (max-width: 480px) { 
    .img-container { 
     // some changes in the class props 
    } 
    .another-class-change-for-480px-max-width-of-screen { 

    } 
}

來源

2017-09-14 10:12:53

我總是將img-container的寬度設置爲100％，但是我我正在根據設備改變高度。 – satheesh

你無論如何都不能設置任何東西的高度。只需設置寬度。和高度自動。媒體查詢應該影響非高度的東西的寬度 –

使用max-width代替width在你的CSS，以避免拉伸

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

來源

2017-09-14 12:52:42

圖像在響應式設計中伸展

回答

相關問題