HTML中的不同比例圖像

Question

我有一個比例爲16：9的圖像，我需要它在網站上使用。在我所展示的其中一頁上，圖像比例爲340x265的產品列表中，當用戶點擊該項目時，該產品頁面將以400x200的比例查看相同的圖像。所以問題是因爲如果能夠延伸口糧差異圖像。 我對html很新穎，處理這個問題的正確方法是什麼？

Answer 1

最快的css唯一的解決方案將寬度/高度給你的圖像的容器div和添加圖像background-image該div。 然後使用該容器的backround-position:center; & background-size:cover;。這樣可以在不損失寬高比的情況下增強圖像質量。

另一種解決方案，如果你想在<img>標記中使用圖像，那麼你必須使用jQuery動態調整圖像大小以適應容器。