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

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

html css

Html 如何在没有SRC的情况下调整帧中图像的大小？,html,css,Html,Css,我正在为一个项目创建一个网页，我正在尝试创建一个图库，您可以在其中选择左侧框架上的图像，并在右侧框架中打开原始图像。每次我点击图像时，它都会在右边的框架中打开，但是它太大了。我想做的是使图像适合帧的宽度，但我还没有找到一种方法，因为我在正确帧的html文件中没有SRC。我试过做一些事情，包括使用iframe，但都没有用。需要帮忙吗这是我的框架集： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

我正在为一个项目创建一个网页，我正在尝试创建一个图库，您可以在其中选择左侧框架上的图像，并在右侧框架中打开原始图像。每次我点击图像时，它都会在右边的框架中打开，但是它太大了。我想做的是使图像适合帧的宽度，但我还没有找到一种方法，因为我在正确帧的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的情况下显示图像，所以要调整图像大小，您需要图像

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

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

检查尝试一些JavaScript和jQuery。将src设置为第一个图像，然后单击将其更改。可能与此类似：

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

你不应该使用标签，因为它是

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

你可以再使用一次

一种方法是抓取clickedimg的src属性并将其注入到的src中，如下所示：

JS:

另一种方法是复制单击的img并用此克隆替换html，这样就不会使用空src替换img标记：

JS:

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

frame tags？？此功能已弃用并已删除

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

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