缩放图像 URL 以适应 Iframe

Question

是否可以使用 iframe 直接 link 大图而不用水平滚动条或截断图片？

我在这里举了一个例子来说明我的意思： 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%;
}

它 link 直接到 a .jpg URL 但它放大了 100%，创建了 2 个滚动条。我只需要图像的宽度与 iframe 的宽度相匹配，而高度仅取决于图像比例。

我想到的例子是当你在 google 上搜索大图时，页面开始缩小，这样你就可以看到整个图像，并允许你点击以 100% 的比例查看；

Answer 1

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

可能的解决方案是向 iframe 添加 marginwidth="0" 属性，但 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。

缩放图像 URL 以适应 Iframe

Zoom an Image URL to fit Iframe

html

javascript

css

iframe

zooming