Cấp bậc tác giả:

HTML

Thay đổi hình ảnh kích thước khác nhau của cửa sổ

Được viết bởi webmaster ngày 26/02/2017 lúc 09:42 AM
Thay vì sử dụng background-image bạn có thể sử dụng img trực tiếp và hình ảnh hiển thị cả chiều rộng của khung nhìn bằng cách sử dụng max-width: 100%; thì sẽ không áp dụng được bất kỳ padding hoặc margin đến div container vì chúng sẽ làm tăng tổng chiều rộng của khung. Sử dụng quy tắc này, bạn có thể có một hình ảnh rộng bằng chiều rộng của trình duyệt và chiều cao cũng sẽ thay đổi theo tỉ lệ.
  • 0
  • 481

Thay đổi hình ảnh kích thước khác nhau của cửa sổ

loading...

Thay vì sử dụng background-image bạn có thể sử dụng img trực tiếp và hình ảnh hiển thị cả chiều rộng của khung nhìn bằng cách sử dụng max-width: 100%; thì sẽ không áp dụng được bất kỳ padding hoặc margin đến div container vì chúng sẽ làm tăng tổng chiều rộng của khung. Sử dụng quy tắc này, bạn có thể có một hình ảnh rộng bằng chiều rộng của trình duyệt và chiều cao cũng sẽ thay đổi theo tỉ lệ.

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML