Chia tỷ lệ HTML img

114

Tôi đang cố gắng hiển thị một số hình ảnh lớn với thẻ HTML img. Tại thời điểm họ đi ra khỏi cạnh của màn hình; làm cách nào để chia tỷ lệ chúng để ở trong cửa sổ trình duyệt?

Hoặc trong trường hợp có khả năng là không thể, ít nhất có thể nói "hiển thị hình ảnh này bằng 50% chiều rộng và chiều cao bình thường của nó"?

Các thuộc tính chiều rộng và chiều cao làm sai lệch hình ảnh - theo như tôi có thể nói, điều này là do chúng tham chiếu đến bất kỳ thuộc tính nào mà vùng chứa có thể kết thúc, sẽ không liên quan đến hình ảnh. Tôi không thể chỉ định pixel vì tôi phải xử lý một bộ sưu tập lớn các hình ảnh, mỗi hình ảnh có một kích thước pixel khác nhau. Chiều rộng tối đa không hoạt động.

html image-scaling

— rwallace
nguồn

4

Hãy nhớ rằng bạn không nên gửi những hình ảnh lớn và thu nhỏ chúng bằng css. Tốt hơn nên có các phiên bản khác nhau của cùng một hình ảnh để tiết kiệm băng thông và giúp trang phản hồi nhanh hơn (ngay cả khi hình ảnh trông nhỏ, hình ảnh đầy đủ sẽ được gửi).

— Esteban Küber

1

rwallace, bạn đang sử dụng .net hay PHP hoặc thứ gì đó khác ngoài HTML thuần túy?

— Dorjan

1

Kích thước tệp hình ảnh không quan trọng, không có yêu cầu trong trường hợp tôi đang xem xét để tiết kiệm băng thông. Tôi đang sử dụng PHP, nhưng giải pháp HTML hoạt động.

— rwallace

135

Chỉ đặt widthhoặc heightvà nó sẽ tự động chia tỷ lệ khác. Và có, bạn có thể sử dụng một tỷ lệ phần trăm.

Phần đầu tiên có thể được thực hiện, nhưng yêu cầu JavaScript, vì vậy có thể không hiệu quả với tất cả người dùng.

— RiddlerDev
nguồn

7

Xin vui lòng, xin lưu ý rằng làm điều này trên các hình ảnh lớn sẽ dẫn đến thời gian tải xuống lâu đối với các trang không nên có thời gian tải xuống lâu. Thực sự thay đổi kích thước hình ảnh luôn tốt hơn nếu có thể.

— ceejayoz

Cảm ơn! Hóa ra giải pháp của bạn là chỉ đặt chiều rộng không chỉ hoạt động để chia tỷ lệ chính xác mà còn thực hiện phần đầu tiên chỉ bằng cách đặt chiều rộng thành 100%.

— rwallace

2

@ceejayoz Tôi đồng ý, nhưng đó không phải là điều anh ấy đang yêu cầu.

— RiddlerDev

@ceejayoz Tôi đang tự hỏi, tại sao nó mất nhiều thời gian hơn? Nó không phải thay đổi kích thước khi nó hiển thị cho cả hai trường hợp? Hay bạn đang nói thay đổi kích thước hình ảnh thực tế và thay đổi tệp theo cách thủ công?

— Abdul

2

@Abdul Tôi đang nói rằng không nên sử dụng hình ảnh 5MB 3.000x3.000 pixel trong vùng 100x100 pixel trong trang web của bạn.

— ceejayoz

18

css là đủ:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/

— Selvadurai Handeeban
nguồn

9

Tôi biết rằng câu hỏi này đã được đặt ra từ lâu nhưng cho đến hôm nay, một câu trả lời đơn giản là:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

Việc sử dụng vw ở đây cho biết rằng chiều rộng tương đối bằng 55% chiều rộng của khung nhìn.

Tất cả các trình duyệt chính hiện nay đều hỗ trợ điều này.

Kiểm tra liên kết này .

— Dimitri de Jesus
nguồn

1

vwlà một cứu cánh cho tôi, các phương pháp khác không hoạt động cho hình ảnh trong tầm tay.

— caram

6

Không cần Javascript.

IE6 Internet Explorer 6

Phần trăm chỉ hoạt động cho chiều rộng của một phần tử, nhưng height:100%; không hoạt động nếu không có mã chính xác.

CSS

html, body { height:100%; }

Sau đó, sử dụng tỷ lệ phần trăm hoạt động đúng cách và cập nhật động về thay đổi kích thước cửa sổ.

<img src="image.jpg" style="height:80%;">

Bạn không cần thuộc tính width, chiều rộng sẽ chia tỷ lệ tương ứng khi kích thước cửa sổ trình duyệt được thay đổi.

Và viên ngọc nhỏ này, trong trường hợp hình ảnh được phóng to lên, nó sẽ không trông (quá) khối (nó nội suy).

img { -ms-interpolation-mode: bicubic; }

Truy cập vào nguồn này: Cheatsheet của IE6 Ultimate: Cách khắc phục hơn 25 lỗi Internet Explorer 6

— không xác định-1
nguồn

6

Thêm max-width: 100%;vào imgthẻ phù hợp với tôi.

— Ralph David Abernathy
nguồn

2

Tôi nghĩ giải pháp tốt nhất là thay đổi kích thước hình ảnh thông qua script hoặc cục bộ và tải chúng lên lại. Hãy nhớ rằng bạn đang buộc người xem tải xuống các tệp lớn hơn mức họ cần

— riotera
nguồn

0

Cách tốt nhất tôi biết làm điều này là:

1) đặt tràn để cuộn và theo cách đó hình ảnh sẽ ở trong nhưng bạn có thể cuộn để xem thay thế

2) tải lên một hình ảnh nhỏ hơn. Bây giờ có rất nhiều chương trình có sẵn khi tải lên (bạn sẽ cần một cái gì đó như PHP hoặc .net để thực hiện việc này btw) bạn có thể để nó tự động mở rộng quy mô.

3) Sống chung với nó và thiết lập chiều rộng và chiều cao, điều này mặc dù sẽ làm cho nó trông méo mó nhưng kích thước phù hợp vẫn sẽ dẫn đến việc người dùng phải tải xuống hình ảnh có kích thước đầy đủ.

Chúc may mắn!

— Dorjan
nguồn