在css中保持寬高比與圖像寬度

Question

有沒有辦法通過使用css來定義寬度較小的圖像的寬高比？也許通過使用jQuery/JavaScript？

謝謝！

Answer 1

帶滑動CSS，可以設置僅一個的圖像的尺寸，無論是width或height，並設置另一個作爲auto，例如：

.thumb { 
    width:200px; 
    height:auto; 
} 

圖像將具有固定的200像素寬，並且高度將取決於寬高比。

Answer 2

這裏是jQuery的解決方案;）

function fixImage(elm) { 
      elm = $(elm); 
      var x = elm[0]; 

      var allowedHeight = 80; 
      var allowedWidth = 80; 
      if (width > height) { 
       elm.css('width', allowedWidth + 'px'); 
       elm.css('height', 'auto'); 
      } 
      else { 

       elm.css('height', allowedHeight + 'px'); 
       elm.css('width', 'auto'); 

      } 
}