Question

我正在为项目创建一个网页，我正在尝试创建一个图库，您可以在左侧框架中选择图像，并在右侧框架中打开原始图像。每次我点击图像时，它都会在右侧框架中打开，但它的尺寸过大。我想要做的是使图像适合框架的宽度，但我还没有想出办法，因为我在右框架的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>

Answer 1

不，你不能在没有src的情况下显示图像，所以要调整图像大小，你需要图像

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

虽然您可以将图像的src发送到另一个iframe而不是显示

检查Pass value to iframe from a window

Answer 2

尝试一些JavaScript和jQuery。将src设置为第一张图片并将其更改为onclick。也许类似于：

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

Answer 3

您永远不应该使用<frame>代码，因为它是not supported in HTML5。

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

您可以再次<iframe>

使用src

执行此操作的一种方法是抓取所点击的img的{{1}}属性，并将其注入src的{{1}}，如下所示：{{3} }

<强> JS：

<img src="bIMG">

另一种方式not all attributes of iframe are supported in HTML5您可以复制点击的$('#gallery img').each(function(){ $(this).on('click', function(){ var src = $(this).attr('src'); $('#bIMG').attr('src', src); }); });并将img html替换为此克隆，这样您就不会使用<div id="bigIMG">标记为空img 1}}：

<强> JS：

src

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

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

3 个答案: