Giữ tỷ lệ khung hình với chiều rộng hình ảnh trong css

Question

Có cách nào để sửa tỷ lệ khung hình của hình ảnh có chiều rộng nhỏ hơn bằng css không? Có lẽ bằng cách sử dụng jQuery/javascript?

Cảm ơn!

Answer 1

Với CSS đơn giản, bạn có thể thiết lập chỉ có một kích thước của hình ảnh, hoặc width hoặc height và thiết lập khác như auto, ví dụ:

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

Các hình ảnh sẽ có một 200px chiều rộng cố định, và chiều cao sẽ phụ thuộc vào tỷ lệ khung hình.

Answer 2

Dưới đây là giải pháp 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'); 

      } 
}