如何在没有SRC的情况下调整帧中图像的大小

我正在为一个项目创建一个网页，我正在尝试创建一个库，您可以在左框中选择一个图像，并在右框中打开原始图像。每次我点击图片，它都会在右边的框架中打开，但它太大了。我想做的是使图像适合框架的宽度，但我还没有找到实现这一点的方法，因为我在右侧框架的html文件中没有SRC。我尝试过几件事，包括使用iframe，但都没有成功。有什么需要帮忙的吗？

这是我的相框：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Frameset</title>
</head>
<frameset rows="*" cols="50%,50%" framespacing="1" frameborder="yes" border="1" bordercolor="#FFFFFF">
  <frame src="gallery_left_frame.html" name="mainFrame" id="mainFrame" title="mainFrame" />
  <frame src="gallery_right_frame.html" name="rightFrame" id="rightFrame" title="rightFrame" style="max-width:100%" marginheight="1px"/>
</frameset>
<noframes>Your browser does not support frames. Please upgrade to a newer browser to use this website.</noframes>
</html>

这是我的图库，是左框：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery</title>
</head>
<body>
   <div align="center"><a href="Assets/General Construction/FDGC001.jpg" target="rightFrame"><img src="Assets/General Construction/General Construction Small/FDGC001.jpg" width="100%" height="auto" /></a></div>
</body>
</html>

这是一个几乎空白的html文件，它是正确的框架：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background-color: #000;
}
img {
    border: none;
    height: 100%;
    width: 100%;
}
</style>
</head>
<body>
</body>
</html>

不，没有src就无法显示图像，因此要调整图像大小，需要图像

MDN src：图像URL。此属性对于元素是必需的。在支持srcset的浏览器上，src被视为具有像素密度描述符1x的候选图像，除非具有该像素密度描述符的图像已经在srcset中定义，或者srcset包含"w"描述符。

尽管您可以将图像的src发送到另一个iframe，然后显示

check从窗口将值传递给iframe

尝试一些JavaScript和jQuery。将src设置为第一个图像，并将其更改为onclick。也许与此类似：

<button class="preview" onclick="foo()"></button>
<Script>
    function foo() {
        $("#fullSizePic").attr("src", "your_link");
    }
</script>

您永远不应该使用<frame>标记，因为它在HTML5中不受支持。

已弃用：此功能已从Web上删除。尽管一些浏览器可能仍然支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或Web应用程序可能随时中断。

你可以使用<iframe>，但同样不是iframe的所有属性都支持HTML5

一种方法是获取单击的img的src属性，并将其注入<img src="bIMG">的src中，如下所示：JSFiddle

JS:

$('#gallery img').each(function(){
    $(this).on('click', function(){
        var src = $(this).attr('src');
        $('#bIMG').attr('src', src);
    });
});

另一种方法JS Fiddle 2您可以复制单击的img并用此克隆替换<div id="bigIMG">html，这样您就不会使用空src:创建img标记

JS:

$('#gallery img').each(function(){
    $(this).on('click', function(){
        var newIMG = $(this).clone();
        $('#bigIMG').html(newIMG);
    });
});

**请注意，您现在可以完全控制图像大小，而不是仅重新调整图像大小。

相关内容

最新更新

热门标签：