缩放图像URL以适应Iframe

是否可以使用iframe直接链接到大图像，而不必使用水平滚动条或切断图像？缩放图像URL以适应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 URL，但它放大100％，创建2个滚动条。我只需要图像的宽度与iframe的宽度相匹配，高度仅取决于图像比例。

我想到的例子是，当您在谷歌上搜索大图时，页面开始缩小，以便您可以看到整个图像，并允许您单击以100％查看;

来源

2015-12-06 Michael Truong

你不需要使用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的架的宽度和高度，以任何你想要的和影像尺寸会自动调整到大小的DIV。

来源

2015-12-07 00:08:01

啊哈哈我现在觉得很愚蠢。虽然我喜欢得到这样的答案，但我认为我必须做些复杂的工作来完成这项工作。自从我加载YouTube视频以及图片以来，我一直在使用iframe。 –

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

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

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

来源

2015-12-07 00:01:20 hKaspy

缩放图像URL以适应Iframe

回答

相关问题