2013-09-21 32 views
5

Cố gắng tìm ra cách tôi có thể có hình ảnh dọc và ngang để điều chỉnh kích thước khung nhìn với các trường hợp chiều cao và chiều cao tối đa.Ràng buộc kích thước hình ảnh với chiều rộng tối đa và chiều cao tối đa tùy theo điều kiện là đúng

Hình ảnh phải giữ chiều rộng 100% miễn là chiều rộng không vượt quá 1050px. Một ràng buộc khác là hình ảnh nên có chiều cao tối đa 800px. Vì vậy, cái nào là "true" đầu tiên nên hạn chế kích thước của hình ảnh.

Nếu tôi đặt max-width: 1050pxmax-height: 800px; thì tỷ lệ co của hình ảnh sẽ bị sai lệch. (Như đã thấy trong bản demo dưới đây). Ngoài ra còn có vấn đề là chiều rộng hình ảnh sẽ rộng hơn hình ảnh thực tế (hình ảnh chân dung có chiều rộng 836px sẽ cao tới 1050px). Điều này có thể kiểm soát chỉ với CSS không?

Demo

Trả lời

1

Với sự giúp đỡ của một người bạn, tôi đã có thể giải quyết vấn đề này, tuy nhiên nó không phải là 100% những gì tôi đang tìm kiếm, nhưng đối với câu hỏi tôi hỏi, tôi đoán nó phù hợp.

Có giao diện HERE.

3

Bạn có thể sử dụng CSS3 viewport units để đạt được điều này, mặc dù actual browser support vẫn còn một chút hạn chế.

+0

Có thể là một ý kiến ​​hay nhưng tôi nghĩ rằng hỗ trợ trình duyệt quá hạn chế trong trường hợp này .. – INT

Các vấn đề liên quan