Hiển thị hình ảnh trong Iframe

Question

Tôi muốn hiển thị hình ảnh trong iframe trên trang web của mình. Tuy nhiên, vấn đề là tôi không thể mở rộng đến 100% kích thước của nó.

Điều tôi muốn làm là như sau.

• Có iframe trên trang web của tôi.
• Gọi một hình ảnh trong khung nội tuyến.
• Làm cho hình ảnh mở rộng thành kích thước đầy đủ và dưới dạng phản ứng, khung nội tuyến cho phép tôi cuộn.
• Không có bất kỳ thanh cuộn trên trang web của tôi

Hiện nay, đây là đoạn code tôi có:

echo"<iframe name='graph' id='graph' src=$image style='position:absolute; top:0px; left:0px; height:100%;width:100%'></iframe>"; 

Điều này không là, nó làm cho các iframe đến trên đầu trang của trang web của tôi và vẫn không mở rộng đến 100%. Nếu tôi loại bỏ các position: absolute thay vì:

echo"<iframe name='graph' id='graph' src=$image style='top:0px; left:0px; height:100%;width:100%'></iframe>"; 

Tôi cuối cùng nhận được nó để mở rộng chiều rộng đến 100%, nhưng về chiều cao, nó là cao chỉ 3 pixel và có một thanh cuộn để di chuyển đến đáy.

Tôi đã xóa trang web tìm kiếm bản sửa lỗi, nhưng không có gì tôi đã thử làm việc. Một số đề cập việc thay đổi CSS là tốt, nhưng không có kết quả ...

EDIT

Một vấn đề tôi phải đối mặt là hình ảnh được thu nhỏ trong Firefox. Tôi cần phải nhấp vào hình ảnh trong khung nội tuyến để mở rộng hình ảnh ở kích thước đầy đủ. Nó hiển thị một cách chính xác trong Chrome và IE mặc dù. có cách sửa nào cho nó không?

Answer 1

Thêm phần này vào CSS trang chính của bạn:

body, html { 
    height:100% 
} 

Answer 2

Bạn có thể sử dụng một số hoạt Javascript để phát hiện kích thước của nội dung iframe và thay đổi kích thước khung nội tuyến.

Answer 3

Vùng chứa (div kèm theo, nếu bạn không có vùng chứa, bạn nên tạo một,) dường như là giới hạn chiều cao của khung nội tuyến. Hãy thử làm cho chiều cao của container 100%.

Answer 4

Vấn đề của bạn là bạn đang trực tiếp nhúng tài nguyên hình ảnh.

Điều này sẽ không bao giờ hoạt động theo cách bạn muốn. Hình ảnh luôn là kích thước gốc.

Bạn cần đặt thuộc tính src của khung nội tuyến thành tệp HTML riêng biệt với số body riêng của mình, bao quanh hình ảnh. Sau đó, bạn có thể cho nó chiều rộng và/hoặc chiều cao 100% bên trong cơ thể bằng cách sử dụng CSS.

Answer 5

đảm bảo bạn đang đặt độ cao 100% trên mọi thứ mặc dù DOM ..thấy http://api.fatherstorm.com/test/iframe.php

và http://api.fatherstorm.com/test/iframe2.php

ví dụ với một trong hai trang nhúng (CNN) hoặc một hình ảnh

Answer 6

NẾU bạn có quyền truy cập đến hình ảnh tại địa phương và bạn có thể sử dụng các chức năng php GD ...

$img_rsrc = imagecreatefromjpeg($path_to_image); 
// or imagecreatefrompng, imagecreatefromgif, etc, depending on the type of your image 
$height = imagesy($img_rsrc); 
$width = imagesx($img_rsrc); 
imagedestroy($img_rsrc); 

Sau đó, đặt kích thước iframe của bạn bằng pixel dựa trên chiều cao và chiều rộng. Bạn có thể phải thêm một chút vào chiều cao và chiều rộng để tính tỷ suất lợi nhuận.

Answer 7

sử dụng mã bên dưới để hiển thị hình ảnh.

<iframe frameborder="0" scrolling="no" width="100%" height="100%" 
    src="../images/eightball.gif" name="imgbox" id="imgbox"> 
    <p>iframes are not supported by your browser.</p> 
</iframe><br /> 


<a href="../images/redball.gif" target="imgbox">Red Ball</a><br /> 
<a href="../images/floatingball.gif" target="imgbox">Floating Ball</a><br /> 
<a href="../images/eightball.gif" target="imgbox">Eight Ball</a>