Phóng to HTML/CSS

Question

Có một số khó khăn khi thu phóng các phần tử HTML. Trong FF hay Chrome, hãy xem (rất, rất đơn giản, mã nhỏ):

http://jsfiddle.net/92wHQ/4/

Từ trình đơn thả xuống, chọn 150%. Hộp gradient màu đen và trắng sẽ mở rộng tới 150% kích thước gốc của nó. Bây giờ nó được thu nhỏ, hãy lưu ý rằng thanh cuộn ngang xuất hiện và thanh cuộn dọc mở rộng để chứa chiều cao và chiều rộng mới, lớn hơn, được chia tỷ lệ.

Bây giờ, hãy chuyển từ 150% xuống 50%. Hộp gradient thực sự có tỷ lệ là 50%, nhưng lưu ý rằng thanh cuộn (dọc) không có hợp đồng để chứa chiều cao mới, nhỏ hơn, được chia tỷ lệ. Thay vào đó, có một khoảng trống màu trắng trống dưới hộp gradient.

Làm cách nào để các trình duyệt làm mới thanh cuộn cho tỷ lệ lớn hơn 100%, nhưng không nhỏ hơn 100%? Làm thế nào tôi có thể nhận được hành vi tương tự cho ít hơn 100% như tôi làm với lớn hơn 100%? Tôi không muốn không gian trắng này.

Answer 1

Tôi có một số thông tin chi tiết về những gì đang xảy ra:

Tỷ lệ chỉ ảnh hưởng đến hộp gradient chứ không ảnh hưởng đến vùng chứa bên trong. Vì vậy, khi bạn mở rộng hộp thành 150%, hộp giờ đây lớn hơn kích thước của div vùng chứa bên trong (div vùng chứa luôn là 496x250), do đó, nó đặt thanh cuộn.

Mặt khác, khi bạn làm cho nó nhỏ hơn, thì hộp gradient nhỏ hơn div vùng chứa bên trong nó, do đó không cần thanh cuộn.

Có thể có một vài cách khác nhau để xử lý việc này. Vấn đề chính là bạn không xử lý việc thay đổi kích thước/chia tỷ lệ của div vùng chứa.

Answer 2

sửa đổi điều gì đó trong câu chuyện. xin vui lòng kiểm tra xem đây là những gì bạn mong muốn:

http://jsfiddle.net/92wHQ/7/

thì cuộn đang thực sự dựa trên 100% kích thước và lớn hơn. chú ý rằng thanh cuộn 100% và thanh cuộn 50% có cùng kích thước "" trong khi thực hiện 150% là lần duy nhất nó nhỏ hơn.