Làm cách nào để thay đổi kích thước hình ảnh trong khi vẫn giữ tỷ lệ co trong CSS?

Question

Tôi có một hình ảnh lớn. Tôi muốn hiển thị nó trên của riêng mình trên một trang web, và khi làm điều này mà không có bất kỳ CSS nó lấp đầy toàn bộ trang và là quá lớn để hiển thị cùng một lúc (thanh cuộn xuất hiện). Tôi muốn mở rộng nó xuống để nó phù hợp với chiều cao của màn hình của người dùng (không phải chiều rộng). Tôi đã tìm thấy các giải pháp nhưng những hình ảnh căng ra để phù hợp với toàn bộ màn hình - Tôi không muốn điều này vì nó làm hỏng tỷ lệ khung hình.

Về cơ bản, tôi muốn đổi kích thước hình ảnh trong khi vẫn giữ tỷ lệ cỡ ảnh. Làm thế nào để tôi làm điều này?

Answer 1

Chỉ cần đặt width-auto:

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

Đây là fiddle: http://jsfiddle.net/6Y5Zp/

Answer 2

Bạn có thể sử dụng một div với background-image và thiết lập nền-size: chứa:

div.image{ 
    background-image: url("your/url/here"); 
    background-size:contain; 
    background-repeat:no-repeat; 
    background-position:center; 
} 

Bây giờ bạn chỉ có thể đặt kích thước div của mình thành bất kỳ thứ gì bạn muốn và không chỉ ảnh sẽ giữ nguyên tỷ lệ khung hình của nó mà nó cũng sẽ được tập trung cả theo chiều dọc và chiều ngang. Chỉ cần đừng quên đặt kích thước trên css vì div không có thuộc tính chiều rộng/chiều cao trên chính thẻ đó.

Thuộc tính kích thước nền tức là> = 9 chỉ.

Answer 3

Tôi nghĩ rằng bạn cần phải dán một lớp bên trong hình ảnh mà bạn muốn hiển thị như thế này

< image class="image" > 

và đây là lớp

.image 


text align: center 
max width:pixels you want 
max height pixels you want 

nhưng chắc chắn rằng cả hai đều cùng số lượng theo cách đó sẽ không thoát khỏi màn hình ở chiều cao và chiều rộng.

hoặc bạn có thể chơi với chiều rộng và chiều cao

Answer 4

đây là mẫu một

div{ 
 
    width: 200px; 
 
    height:200px; 
 
    border:solid 
 
} 
 

 
img{ 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: contain; 
 
    }

<div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png"> 
 
</div>