Tỷ lệ thu nhỏ DIV tương tự như hình ảnh phản hồi?

Question

Đây có thể là một câu hỏi ngớ ngẩn ... nhưng trong CSS, một "hình ảnh đáp ứng" thường là một cái gì đó như thế này:

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

Có thể sử dụng một div (hoặc một loạt các divs lồng nhau) thay vì một hình ảnh hoạt động theo cách tương tự như hình ảnh phản hồi? Bạn sẽ cần phải xác định một div với chiều rộng 1000px và chiều cao 200px, nhưng nó có tỷ lệ thu nhỏ khi vùng chứa co lại theo chiều rộng.

Về cơ bản, là nó có thể làm cho một cái gì đó như thế này:

http://codepen.io/jakobud/pen/jEKVRZ

cư xử như thế này:

http://codepen.io/jakobud/pen/MYXbZB

Đây có phải là có thể bằng cách nào? Nếu không, tại sao? Bạn rõ ràng không thể thêm height: auto vào số div.two vì điều đó sẽ ghi đè chiều cao được xác định của DIV.

Một cách giải quyết khác mà tôi đã xem xét cho cách tiếp cận này là tạo một PNG có kích thước 1000x200 hoàn toàn mà bạn sẽ đặt vào thùng chứa của mình, kết quả mong muốn, nhưng đó là tổng số hack. Có vẻ như bạn sẽ có thể làm điều đó với CSS nhưng tôi không chắc chắn làm thế nào.

Ngoài ra tôi đang tìm một giải pháp không yêu cầu jQuery.

Lý do tôi yêu cầu điều này là đôi khi các nhà thiết kế đã yêu cầu một cái gì đó như thế này, nơi có một hộp chứa có kích thước nhất định nhưng không có hình nền nào được sử dụng. Trong một số trường hợp, nhà thiết kế muốn sử dụng độ dốc CSS cho nền nên tôi không thể chỉ sử dụng <img> là tỷ lệ co của vùng chứa. Rõ ràng là tôi không thể dựa vào nội dung (một số <h1> hoặc một cái gì đó) để quyết định tỷ lệ khung hình/hình dạng vùng chứa.

Answer 1

div s không thực chất có tỷ lệ cỡ ảnh như hình ảnh, nhưng bạn có thể sử dụng đệm trên div bao bọc với con hoàn toàn được định vị để mô phỏng tỷ lệ co. Đây là một cách tiếp cận phổ biến để xử lý video đáp ứng.

.one { 
    position: relative; 
    padding-bottom: 20%; /* 1000:200 */ 
    height: 0; 
} 

.two { 
    width: 1000px; 
    height: 200px; 
    background: #999; 
    color: #FFF; 
    text-align: center; 
    font-family: sans-serif; 
    max-width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

codepen Cập nhật: http://codepen.io/sdsanders/pen/zxaNGQ