Cách CSS tinh khiết để giữ hình ảnh theo tỷ lệ bên trong màn hình: yếu tố bảng?

Question

Tôi chỉ đơn giản là không có ý tưởng làm thế nào để làm như vậy hoặc nếu điều này thậm chí có thể với css tinh khiết?

Đây là codebase của tôi ...

<article class="layer"> 
     <img src="whatever.jpg" alt="image"/> 
</article> 

html, body, #content { 
    margin: 0; padding: 0; 
    height: 100%; 
    width: 100%; 
} 

article.layer { 
    position: relative; 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

Vì vậy, tôi có bài viết với một lớp layer và họ được thiết lập để display:table vì tôi muốn họ được càng cao và rộng như khung nhìn hiện hành.

Mỗi bài viết trong số đó có một <img> bên trong với các kích thước khác nhau.

Tôi đang cố tạo một loại thiết kế web đáp ứng!

Các <img> s bên trong của article s nên được căn giữa trong bài viết gốc và có lề khoảng 30px. Khi thay đổi kích thước cửa sổ trình duyệt, hình ảnh cũng sẽ được thu nhỏ.

Đây là một mẫu: http://jsbin.com/ugumuj/edit#preview

Trước hết: Làm thế nào tôi có thể tập trung các hình ảnh bên trong của màn hình: yếu tố bảng? Nó phải được căn giữa theo chiều dọc và chiều ngang.

Tôi có phải chỉ định chiều rộng và chiều cao của hình ảnh hoặc có thể đặt loại này thành chiều rộng 100% trong cửa sổ trình duyệt và lề thêm 30px hay không.

Tôi đoán tôi có thể cần rất nhiều javascript để làm như vậy, phải không?

Kính trọng, mờ

Answer 1

Chìa khóa để giữ tỉ lệ khung hình là sử dụng max-width và max-height thay vì width và height:

article.layer img { 
    max-width: 80%; 
    max-height: 80%; 
} 

Đối với định tâm, bạn có thể sử dụng một div wrapper bổ sung, được đặt xung quanh thành phần <img>:

div.wrap { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

Tuy nhiên, việc thêm lề 30px không phải là dễ dàng. Các mối quan hệ phần trăm áp dụng cho kích thước màn hình, vì vậy chỉ cần thêm một lề sẽ làm cho nó tràn màn hình. Cách dễ nhất có thể là thêm div toàn màn hình với position: absolute, cách này sẽ hoạt động như một tham chiếu mới cho số đo phần trăm.

Các mã hoàn chỉnh (không có lề 30px) là ở đây: http://jsbin.com/ugumuj/10/edit

Answer 2

Nó khá đơn giản cho trung tâm dọc. Bạn cần phải text-align: center trên phần tử gốc (bài viết) và sử dụng

margin: auto; 

trên chính hình ảnh đó. Đối với trung tâm dọc tôi đoán bạn sẽ cần phải có margin-top với một giá trị phần trăm ví dụ.

Ví dụ: http://jsbin.com/ugumuj/11/edit