CSS Image layouting trước khi hình ảnh được tải

Question

Đối với trang web di động của tôi, tôi muốn thể hiện hình ảnh khác nhau nhưng được biết đến chiều cao/chiều rộng với hai khó khăn:

• Hình ảnh nên mất toàn bộ chiều rộng của browserview
• Các chiều cao cần được nhân rộng (xuống hoặc lên) phù hợp để giữ proportions

ngay sau khi trình duyệt sẽ tải hình ảnh, nó là rất dễ dàng với CSS sau đây:

<img src="myImageURl" style="width: 100%; height: auto;" /> 

Nhưng vì tải của hình ảnh mất một thời gian, tôi muốn trình duyệt để bố trí các hình ảnh trước khi nó tải về nó. Vì vậy, trình duyệt không cần phải đăng lại trang, khi anh ta lấy hình ảnh. Tôi đã thử các cách tiếp cận sau, không thành công:

// The image is not layouted before fetched 
<img src="myImageURl" height="myImageHeight" width="myImageWidth" style="width: 100%; height: auto;" /> 

// The image is layouted, but wrong: height is not proportional to the width anymore 
<img src="myImageURl" style="width: 100%; height: myImageHeight;" /> 

Tôi rất muốn được trợ giúp tại đây. Nhưng xin vui lòng trong CSS, tôi không muốn sử dụng Javascript/jQuery nếu tôi không phải.

CẬP NHẬT

Tôi đoán Tôi không phải là người duy nhất với vấn đề này: https://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height

Answer 1

Như Pete đã nói, bạn không thể làm bất kỳ tính toán (tự động) trước khi hình ảnh sẽ được tải về, vì vậy trình duyệt biết chiều rộng và chiều cao của nó.

Nhưng vì bạn có thể xác định tỷ lệ khung hình của hình ảnh trước, bạn có thể thử cách giải quyết bằng cách thêm phần tử giữ chỗ bổ sung xung quanh hình ảnh - và sử dụng thực tế là padding values given in percentage always are calculated based on the width of an element, even for padding-top/-bottom.

Điều đó có thể trông giống như thế này:

<div style="position:relative; width:100%; height:0; padding-top:50%;"> 
    <img style="position:absolute; top:0; left:0; width:100%;" src="…"> 
</div> 

Đây là một yếu tố div không có chiều cao, nhưng một padding-top - mà sẽ cung cấp cho nó một “height” thực tế của 50% số tính 100% chiều rộng. (Điều đó có thể là hình ảnh có tỷ lệ khung hình là 2:1 - cho giá trị phần đệm-top là 33.333% - và cứ thế, về cơ bản là height/width*100.)

Điều đó sẽ kéo dài trình giữ chỗ của chúng tôi ngay cả trước hình ảnh được tải.

Hình ảnh bản thân được bố trí hoàn toàn bên trong giữ chỗ tương đối vị trí này - mà làm cho chắc chắn nó được hiển thị ở vị trí tương đương trong tài liệu.

Điều duy nhất mà có thể có vấn đề làm tròn phải xảy ra cho các giá trị có dấu thập phân - 33.333% 1000 pixel sẽ là 333,33 pixel và trình duyệt phải làm tròn xuống 333 pixel. Tuy nhiên, nếu hình ảnh được thay đổi kích thước có chiều cao thực tế là 334 pixel, nó sẽ chỉ chảy ra khỏi khu vực mà trình giữ chỗ div được kéo dài bởi một pixel đó. Có thể phụ thuộc vào cách bố trí thực tế (và tôn sùng của bạn cho độ chính xác pixel hoàn hảo) cho dù điều đó có được chấp nhận hay không.