Tôi không thực sự cần nó bây giờ, nhưng chỉ vì tò mò ...ảnh rộng với CSS
Giả sử chúng ta có một chất lỏng bố trí trang web hoạt động hoàn hảo tốt trên 1920px hiển thị và trên điện thoại thông minh nhỏ. Bây giờ chúng ta hãy nói rằng chúng tôi có hình ảnh ở đó và rõ ràng (rõ ràng?), Chúng tôi muốn quy mô chúng. Chúng tôi đã tải lên hình ảnh 2560px trên máy chủ (vì ai quan tâm đến băng thông hiện nay) và đặt thuộc tính width: 100% cho thẻ img. Vì vậy, chúng tôi có hai người dùng: một lập trình viên với màn hình 1920px, hãy gọi anh ấy là Jo và một nữ sinh với điện thoại thông minh, hãy gọi cô ấy là Nancy (vì mọi thứ tốt hơn với Nancy, phải không?).
Jo và Nancy rất vui vì kế hoạch của chúng tôi với việc chia tỷ lệ hình ảnh bằng cách sử dụng width: 100% hoạt động, nhưng điều gì sẽ xảy ra nếu chúng tôi quyết định hiển thị hình ảnh nhỏ, chiều rộng 400px? Nancy sẽ không nhận thấy bất cứ điều gì, nhưng đối với Jo nó sẽ là một thảm họa.
Vì vậy, câu hỏi đặt ra là: chúng ta có thể làm cho Jo và Nancy vui vẻ mà không cần sử dụng JavaScript không?
Điều gì đủ điều kiện làm cho họ hài lòng? Ngoài ra, phục vụ hình ảnh 2560px cho điện thoại thông minh là một ý tưởng khủng khiếp. –
Họ sẽ hạnh phúc nếu hình ảnh của chúng tôi sẽ mở rộng ở điện thoại thông minh của Nancy và Jo sẽ thấy hình ảnh 400px mà không cần mở rộng quy mô. –
Bạn có nghĩa là bạn đã đặt thuộc tính chiều rộng của hình ảnh thành 100% như trong '
'? –
MrMisterMan