Question

是否可以使用iframe直接链接到大图像，而无需使用水平滚动条或切断图像？

我在这里举了一个例子来说明我的意思： http://jsfiddle.net/yLu3acL4/1/

HTML

<div class="wrapper">
    <div class="iframe-holder">
       <iframe src="somelargeimageontheweb.jpg" frameborder="0" allowfullscreen></iframe>    
    </div>
</div>

CSS

html,body{height:100%;}
.wrapper{
  width:100%;
  height:80%;
  background:#CCC
}
.iframe-holder{
  position:relative;
  width: 100%;
  height: 100%;

}
.iframe-holder iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

它直接链接到.jpg网址，但它以100％缩放，创建了2个滚动条。我只需要图像的宽度来匹配iframe的宽度，高度只取决于图像比例。

我想到的例子是当你在谷歌搜索一个大图像时，页面开始缩小，这样你就可以看到整个图像并允许你点击以100％查看它;

Answer 1

滚动条在这里是因为iframe中的body元素具有非零边距属性。

可能的解决方案是将marginwidth="0"属性添加到iframe，但不再支持HTML5（!!!）。（http://jsfiddle.net/yLu3acL4/5/上的例子）

如果这些图像将托管在同一个域中，您可以使用一些JS魔法来获得相同的结果，但在不同的域上这是非常不可能的。

Answer 2

您无需使用iframe即可获得所需的结果。

相反，您可以将其更改为img标记并将CSS更改为：

.iframe-holder{
  width: 50px;
  height: 50px;
  position: relative;
}
.iframe-holder img {
  max-width:100%; 
  max-height:100%;
  margin:auto;
  display:block;
}

将iframe-holder的宽度和高度更改为您想要的任何值，图像大小将自动调整为DIV的大小。

缩放图片网址以适合iframe

2 个答案: