Cách hiển thị hình ảnh có kích thước đầy đủ

<a href="FullSize.jpg"><img alt="thumb" src="thumb.jpg"></a>

Khi ngón tay cái trên được hiển thị, trình duyệt sẽ hiển thị kích thước FullSize.jpg vừa với cửa sổ trình duyệt của khách hàng và khi con trỏ di chuyển trên dấu '+' việc nhấp vào hình ảnh sẽ hiển thị kích thước đầy đủ. Những gì tôi muốn làm là hiển thị hình ảnh kích thước đầy đủ ở nơi đầu tiên, mà không yêu cầu người dùng nhấp vào nó để có kích thước đầy đủ. Làm thế nào để làm điều này?Cách hiển thị hình ảnh có kích thước đầy đủ

Nguồn

2010-10-02 Jim

Hiển thị hình ảnh đầy đủ: <img alt="full image" src="FullSize.jpg" />?

Chỉnh sửa Ah, giờ đây tôi biết ý của bạn là gì. Giống như David Thomas nói, điều này phụ thuộc vào trình duyệt. Nếu bạn muốn hình ảnh được hiển thị fullsize, bạn không thể liên kết trực tiếp đến hình ảnh. Với HTML duy nhất bạn có thể làm một cái gì đó như thế này:

<a href=fullsize.html"><img alt="thumb" src="thumb.jpg"></a>

này sẽ mở ra một trang HTML mới, trong đó sẽ hiển thị hình ảnh của bạn:

fullsize.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Your image title</title> 
    </head> 
    <body> 
    <img src="FullSize.jpg" style="width:100%;height:100%;" alt="" /> 
    </body> 
</html>

Nhưng cuối cùng đây không thực sự là cách để đi. Điều tốt nhất cần làm là cung cấp cho người dùng lựa chọn cách mọi thứ được hiển thị và không ép buộc thứ gì đó vào chúng. Nếu chúng hoạt động ở độ phân giải thấp hơn và bạn hiển thị một hình ảnh lớn ở kích thước đầy đủ, không có cách nào để chúng thay đổi nó. Tốt nhất để chỉ liên kết đến hình ảnh và nếu người dùng quyết định họ muốn xem toàn màn hình, họ có thể nhấp vào hình ảnh để trình duyệt thay đổi kích thước hình ảnh đó.

Nguồn

2010-10-02 17:46:55 Alec

Chỉ cần xóa neo </a> bao quanh hình ảnh của bạn. Nếu bạn muốn "đảm bảo" hiển thị ở kích thước đầy đủ, hãy thêm width="100%" vào thẻ <img /> của bạn.

Ngoài ra, để hiển thị đầy đủ, nó không được neo ở bất kỳ đâu. Chỉ cần đăng hình ảnh của bạn ngay lập tức trong một thẻ <body>.

Nguồn

2010-10-02 17:50:54

Tôi không thể hiển thị nó ở kích thước đầy đủ, chỉ có chỗ cho ngón cái. – Jim

Tôi giả sử có một CSS (một cái gì đó giống như 'a img {...}') đã được đưa ra một chiều rộng cố định, do đó hình ảnh của bạn không được hiển thị ở chế độ toàn màn hình. Thảo luận về khai báo 'width' trong CSS. –

@Jim, không có chỗ để hiển thị hình ảnh kích thước đầy đủ, nhưng bạn muốn hiển thị hình ảnh có kích thước đầy đủ? Không tính ... – Alec

tạo một trang FullSize.html với <img src="FullSize.jpg"/> và

hiển thị tumb với liên kết đến tập tin đó

<a href="FullSize.html"><img alt="thumb" src="thumb.jpg"></a>

Nguồn

2010-10-03 17:05:09 jcubic

Thật không may, những gì bạn mô tả là một tính năng giao diện người dùng trình duyệt (hoặc 'lỗi' tuỳ thuộc vào bạn quan điểm) và chỉ có thể được bật/tắt bởi người dùng. Thông thường thông qua tùy chọn 'chỉnh sửa tùy chọn'.

Chỉ thực hiện nếu hình ảnh ở kích thước đầy đủ lớn hơn cổng xem, để người dùng có thể xem toàn bộ hình ảnh mà không cần phải cuộn xung quanh, nó được thực hiện 'sống' để hình ảnh không bị nén/thay đổi kích thước, chỉ cần thu nhỏ để vừa với chế độ xem. Nó cũng ngay lập tức, và trực quan, không thể thực hiện được bởi người dùng chỉ bằng một cú nhấp chuột. Tôi không chắc chắn rằng, nếu có cách nào đó, tôi có thể đề xuất một kỹ thuật như vậy, đặc biệt vì đó là một tính năng mà tôi hài lòng với nhiều người hơn, với tư cách là người phát triển và, hơn tôi không hài lòng bởi nó.

Cách duy nhất xung quanh nó, mà tôi có thể nghĩ là tìm chiều cao/chiều rộng gốc của hình ảnh, quấn nó trong một div với các kích thước đó (cộng với một phần đệm nhỏ). Tôi không chắc nó có hiệu quả không, nhưng đó là điều duy nhất hiện lên trong đầu tôi đang nghĩ về nó.

Nguồn

2010-10-03 17:11:42

Cách hiển thị hình ảnh có kích thước đầy đủ

Trả lời

Các vấn đề liên quan