ảnh Responsive vs xác định chiều rộng và chiều cao của một hình ảnh trong HTML

Question

Tôi đọc về responsive design và tôi nhận thấy các vấn đề sau đây:

Một trong những khuyến nghị liên quan đến "hình ảnh Lỏng" là sử dụng một quy tắc CSS như :

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

nhưng để có ảnh hưởng đúng, chúng tôi cần loại bỏ các thuộc tính chiều rộng và chiều cao của hình ảnh trong thẻ img.

Cách giải quyết với It’s important to specify the width and height of an image in HTML?

Cảm ơn

Answer 1

Bạn không cần phải loại bỏ các thuộc tính chiều rộng và chiều cao của hình ảnh.

jsFiddle: http://jsfiddle.net/7j3db/

Tested trong Chrome, Firefox, Opera, IE9 và IE9 bắt chước IE7. Dường như làm việc tốt trong tất cả chúng, với quy tắc CSS chính xác mà bạn đã đề cập.

EDIT: Thử nghiệm với một hình ảnh không thể được nạp: http://jsfiddle.net/7j3db/1/

này có tác dụng thích hợp trong Chrome và IE (thậm chí IE7), nhưng không phải trong Firefox hoặc Opera. Tuy nhiên, ngay cả trong Firefox và Opera, hiệu ứng đã tốt hơn nếu các thuộc tính chiều rộng và chiều cao bị bỏ đi (vì thuộc tính width vẫn có hiệu lực, mặc dù thuộc tính height không).

Kiểm tra thêm với văn bản thay thế (http://jsfiddle.net/7j3db/2/): Xử lý hoàn toàn bằng IE7, nhưng IE9 tham gia Opera và IE8 thực hiện điều gì đó rất lạ (chiều cao hình ảnh tùy thuộc vào độ dài của văn bản thay thế - văn bản thay thế). Chrome dường như bỏ qua toàn bộ văn bản thay thế. Opera và FF hiển thị văn bản thay thế, nhưng về mặt cơ bản thì hành vi tương tự như trước đây. Tuy nhiên, các thuộc tính chiều rộng và chiều cao dường như không chịu trách nhiệm về bất kỳ sự cố văn bản thay thế nào (ngoại trừ trong IE8, ở một mức độ nào đó).

Answer 2

Mặc dù (như tôi đã nêu trong câu trả lời khác của tôi), các thuộc tính width và height không ảnh hưởng đến hình ảnh chất lỏng, hình ảnh chất lỏng ảnh hưởng đến các hình ảnh chưa được tải chiếm dung lượng thích hợp trong các trình duyệt khác ngoài Chrome. Có một cách giải quyết cho việc này: quấn hình ảnh trong một div với một tỷ lệ nội tại, như mô tả trong bài viết này: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

.img-wrapper { 
    max-width: 200px; /* The actual width of the image */ 
} 

.img-wrapper2 { 
    height: 0; 
    padding-bottom: 100%; /* The image's height divided by its width */ 
} 

Đáng tiếc là điều này đòi hỏi hai divs wrapper, để có được max-width hiệu lực ngay. Tuy nhiên, nó cung cấp cùng một lợi thế cho tốc độ tải rõ ràng mà các thuộc tính width và height cung cấp. Bạn có thể muốn cung cấp cho .img-wrapperoverflow: hidden để ẩn một số hành vi bệnh lý của IE cũ hơn.

jsFiddle: http://jsfiddle.net/7j3db/32/

Answer 3

Bạn có thể đạt được điều này bằng cách thêm

html, body{ 
max-width:100%; 
width:100%; 
} 

và cũng đặt những thuộc tính trên div cha mẹ của thẻ img.