Làm cách nào để tạo hình ảnh vừa với hộp hình vuông 200 pixel bằng CSS?

Question

Tôi có một loạt các hình ảnh phù hợp với hộp 400px × 400px (nghĩa là một trong các kích thước của chúng là 400px và hình kia nhỏ hơn). Tôi muốn có thể, bằng cách sử dụng CSS, nhưng jquery/javascript nếu cần thiết, phù hợp với hình ảnh đó vào một hộp 200px x 200px, để hai cạnh của hình ảnh chạm vào hộp, và có một khoảng cách giữa hai cạnh khác của cái hộp. Tỷ lệ khung hình phải được duy trì.

HTML của tôi là như sau:

<div class="small"> 
    <img src="/images/photos/View.jpg" alt="View" /> 
</div> 

Và CSS của tôi là:

div.images div.small 
{ 
    width:200px; 
    height:200px; 
    line-height:200px; 
    text-align:center; 
} 
div.images div.small img 
{ 
    vertical-align:middle; 
    max-width:200px; 
    max-height:200px; 
} 

Bạn có thể thấy một mẫu here.

Thật không may, hình ảnh phong cảnh của tôi ôm đầu hộp, trong khi tôi muốn chúng được căn giữa. Ngoài ra, tôi không chắc chắn về những người phụ nữ dựa vào số max-width/max-height.

Làm cách nào để căn giữa hình ảnh của tôi trong các hộp này?

Answer 1

Tôi thiết lập tính năng này trên máy tính và hoạt động tốt. Sau khi xem trang ví dụ của bạn, vấn đề là vì bạn đã đặt hình ảnh thành display:block. Hoặc loại bỏ quy tắc từ chung img quy tắc của bạn (điều kỳ lạ để thiết lập trên toàn cầu, dù sao), hoặc thay đổi các quy tắc hình ảnh mà bạn đăng tải trên như sau:

div.images div.small img 
{ 
    vertical-align: middle; 
    max-width: 200px; 
    max-height: 200px; 
    display: -moz-inline-box; /* Firefox 2 */ 
    display: inline-block; 
} 

Theo mặc định, các yếu tố img và khác "thay thế" yếu tố (Flash, vv) là "inline-block" - điều này có nghĩa là chúng chuyển nội dòng như văn bản, nhưng có chiều rộng và chiều cao.

Answer 2

có bạn cố gắng sử dụng:

display:block; 
margin-left:auto; 
margin-right:auto; 

rằng nên tập trung các yếu tố mức khối

Answer 3

tôi cần phải làm như vậy một thời gian trước, và tôi thấy một thực hiện tốt trong this link. "Căn giữa hình ảnh bên trong div, dọc và ngang, mà không biết kích thước của hình ảnh".

Nó phù hợp với tôi như dự định.

Answer 4

Tôi chạy vào vấn đề định tâm thẳng đứng này một lần và để làm cho nó hoạt động chính xác trong tất cả các trình duyệt, tôi viện đến javascript/jQuery:

$(document).ready(function() { 
    $('img').each(function() { 
     image_height = $(this).height(); 
     margin_top = (200 - image_height)/2; 
     $(this).css('margin-top', margin_top + 'px'); 
    }); 
}); 

Xin lưu ý rằng bạn sẽ cần $ (window) .load thay vì $ (document) .ready nếu kích thước hình ảnh không được đưa ra trong html.

Answer 5

Đây là giải pháp sẽ hoạt động bất kể kích thước bạn muốn. Nó sẽ downscale nhưng không cao cấp, trung tâm cả theo chiều dọc và chiều ngang, và chỉ sử dụng CSS. Tôi mất một lúc để tìm ra.

Đặt <img> của bạn bên trong <div>, sau đó định vị div như bạn muốn (tức là, Cung cấp cho nó kích thước bạn muốn, hãy chắc chắn để thiết lập các thuộc tính position), sau đó áp dụng điều này:

.mydiv > .myimg { 
    vertical-align: bottom; 
    max-height:  100%; 
    max-width:  100%; 
    position:  absolute; 
    margin:   auto; 
    top:   0; 
    right:   0; 
    bottom:   0; 
    left:   0; 
}