Sử dụng CSS để phóng to và thu nhỏ hình ảnh

Question

Tôi có hình ảnh trong tiêu đề trang web của mình. Tôi muốn sử dụng thuộc tính CSS để làm cho nó trải rộng trên chiều rộng của trình duyệt, để nó phản ứng với người dùng điều chỉnh kích thước cửa sổ trình duyệt và do đó trục dọc của hình ảnh được thu nhỏ cho phù hợp. Đây có phải là điều thực sự có thể làm được không?

Answer 1

Bạn có thể đặt thuộc tính chiều rộng và chiều cao thành phần trăm (ví dụ: chiều rộng 100% sẽ làm cho hình ảnh trải dài trên trang của bạn). Điều này có thể được thực hiện bằng cách sử dụng CSS.

Answer 2

CSS chắc chắn có thể kéo dài một hình ảnh (hoặc, ít nhất, tôi đã sử dụng nó để làm như vậy trong Firefox tại url folowing: http://www.davidrhysthomas.co.uk/mindez/borked.html):

img {height: 100%; 
    width: 100%; 
    min-height: 600px; 
    min-width: 800px; 
    } 

ví dụ.

Nhưng ... Tôi nghĩ rằng để nó phản ứng với khung nhìn thay đổi kích thước mà JS có thể là bạn tốt hơn của bạn.

Answer 3

Tỷ lệ phần trăm sẽ giữ nguyên toàn bộ chiều rộng và sẽ cập nhật hình ảnh khi thay đổi kích thước trình duyệt.

Nếu bạn muốn hình ảnh luôn được căng ra, bạn có thể sử dụng:

img { 
    width:100%; 
} 

Tuy nhiên, đó có thể dễ dàng làm cho hình ảnh trông giống như tổng tào lao. Một cách an toàn hơn có thể là:

img { 
    max-width:100%; 
} 

Dù bằng cách nào cũng sẽ thay đổi kích thước hình ảnh bằng cách thay đổi kích thước trình duyệt. Tuy nhiên, thứ hai sẽ không kéo dài hình ảnh qua kích thước tự nhiên của nó, vì vậy nó không bị biến dạng.

Answer 4

Ở đây, hãy thực hiện thao tác này, chỉ áp dụng kiểu CSS này cho phần tử chứa hình ảnh. Trong ví dụ này hình ảnh là trên nền tảng của cơ thể page:

body 
{ 
margin: 0; 
padding: 0; 
width: 100%; 
background: url(images/YOUR-IMAGE.JPG) no-repeat left top; 
background-size: 100%; 
} 

này sẽ tối đa hóa hình ảnh của bạn trên phần tử. Thay đổi kích thước cửa sổ sẽ mở rộng hình ảnh để vừa với kích thước cửa sổ trình duyệt mới