Làm cách nào để thay đổi kích thước hình ảnh động với CSS khi chiều rộng / chiều cao của trình duyệt thay đổi?

Tôi tự hỏi làm thế nào tôi có thể thay đổi kích thước hình ảnh cùng với cửa sổ trình duyệt, đây là những gì tôi đã làm cho đến nay (hoặc tải xuống toàn bộ trang web dưới dạng ZIP ).

Điều này hoạt động tốt trên Firefox, nhưng nó có vấn đề trong Chrome: hình ảnh không phải lúc nào cũng thay đổi kích thước, bằng cách nào đó, nó phụ thuộc vào kích thước của cửa sổ khi trang được tải.

Điều này cũng hoạt động ổn trong Safari, nhưng đôi khi hình ảnh được tải với chiều rộng / chiều cao tối thiểu của nó. Có thể điều này là do kích thước hình ảnh gây ra, tôi không chắc chắn. (Nếu nó tải ổn, hãy thử làm mới vài lần để xem lỗi.)

Bất kỳ ý tưởng nào về cách tôi có thể làm cho nó chống đạn tốt hơn? (Nếu cần JavaScript, tôi cũng có thể sống với điều đó, nhưng CSS thích hợp hơn.)

Điều này có thể được thực hiện với CSS thuần túy và thậm chí không yêu cầu các truy vấn phương tiện.

Để làm cho hình ảnh linh hoạt, chỉ cần thêm max-width:100%và height:auto. Hình ảnh max-width:100%và height:autohoạt động trong IE7, nhưng không hoạt động trong IE8 (vâng, một lỗi IE kỳ lạ khác). Để khắc phục điều này, bạn cần thêm width:auto\9cho IE8.

nguồn: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Và nếu bạn muốn thực thi chiều rộng tối đa cố định của hình ảnh, chỉ cần đặt nó bên trong vùng chứa, ví dụ:

<div style="max-width:500px;">
    <img src="..." />
</div>

Ví dụ JSFiddle ở đây . Không cần JavaScript. Hoạt động trong các phiên bản mới nhất của Chrome, Firefox và IE (đó là tất cả những gì tôi đã thử nghiệm).

2018 và giải pháp mới hơn:

Việc sử dụng các đơn vị tương đối của khung nhìn sẽ giúp cuộc sống của bạn dễ dàng hơn, vì chúng tôi có hình ảnh của một con mèo:

Bây giờ chúng tôi muốn con mèo này bên trong mã của chúng tôi, đồng thời tôn trọng tỷ lệ khung hình:

img {
  width: 100%;
  height: auto;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Cho đến nay không thực sự thú vị, nhưng điều gì sẽ xảy ra nếu chúng ta muốn thay đổi chiều rộng mèo thành tối đa 50% của khung nhìn?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Cùng một hình ảnh, nhưng hiện bị giới hạn ở chiều rộng tối đa là 50vw vw (= chiều rộng khung nhìn) có nghĩa là hình ảnh sẽ có chiều rộng X của khung nhìn, tùy thuộc vào chữ số được cung cấp. Điều này cũng hoạt động đối với chiều cao:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Điều này hạn chế chiều cao của hình ảnh ở mức tối đa là 20% của khung nhìn.

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

Trong onresizesự kiện IE được kích hoạt trên mọi thay đổi pixel (chiều rộng hoặc chiều cao) nên có thể có vấn đề về hiệu suất. Trì hoãn thay đổi kích thước hình ảnh trong vài mili giây bằng cách sử dụng window.setTimeout () của javascript.

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Đặt thuộc tính thay đổi kích thước thành cả hai. Sau đó, bạn có thể thay đổi chiều rộng và chiều cao như sau:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

Bạn đang sử dụng jQuery?

Bởi vì tôi đã nhanh chóng tìm kiếm các plugin jQuery và chúng dường như có một số plugin để thực hiện việc này, hãy kiểm tra plugin này, sẽ hoạt động:

http://plugins.jquery.com/project/jquery- afterresize

BIÊN TẬP:

Đây là giải pháp CSS, tôi chỉ thêm một style = "width: 100%" và phù hợp với tôi ít nhất là trong chrome và Safari. Tôi không có nghĩa là, vì vậy chỉ cần kiểm tra ở đó và cho tôi biết, đây là mã:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

Ban đầu, tôi đang sử dụng html / css sau:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

Sau đó, tôi đã thêm class="img"vào <div> như thế này:

<div class="img">
  <img src="..." />
</div>

Và mọi thứ bắt đầu hoạt động tốt.

Bạn có thể sử dụng thuộc tính CSS3 scaleđể thay đổi kích thước hình ảnh bằng css:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Đọc thêm :

• Chuyển đổi 2D CSS3
• CSS3 Hover Effect Transitions, Transformations, Animations

Chỉ cần sử dụng mã này. Hầu hết những gì đang nhắm mục tiêu là chỉ định chiều rộng tối đa là chiều rộng tối đa của hình ảnh

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

Kiểm tra phần trình diễn này http://shorturl.at/nBKVY

Thử

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Chỉ hoạt động với khối hiển thị và khối nội tuyến, điều này không ảnh hưởng đến các mục linh hoạt vì tôi đã dành nhiều thời gian để cố gắng tìm hiểu.