0

我正在将正在开发的站点转换为引导程序。在我的一个页面上，我根据用户输入动态创建图像。

我从这样的页面开始：

生成图像之前

之后 ：

生成图像后

用户单击其中一个杂志封面，左上角会生成一个新图像。图像的其他部分是用户在其他页面上所做的选择。

我的问题是生成代码的 javascript 在 HTML 中插入 width= 和 height= 代码。由于这会破坏引导响应图像，我想摆脱它，但我不知道如何。其他一切工作正常。

这是过程：

我从 HTML 开始：

<div id='FramePreviewDiv'>
<img class='img-responsive' alt='' id='fpS' style='padding:4px' src='' />   </a>
</div>

页面入口没有图像。生成默认图像。

当客户点击其中一个杂志封面时，就会发出请求。

getImage('fpS', buildFrameUrl ( 200  ), true);

函数 buildFrameUrl 返回如下内容：

http://www.example.com/BuildFrame.php?mNo=693&tm=C9885&mm=&bm=C9887&noMats=2&size=200&art=siv1n1-0854.jpg&ft=1&matWidth=2.0&maxWidth=200&maxHeight=400&artWidth=8.25&artHeight=11.5&isCropped=0&xStart=0&yStart=0&croppedPxWidth=&croppedPxHeight=&caw=&cah=

这是getImage的代码

function getImage(pExistingImageID, pImageURL, fShowLoading)
{
    var link;
    if (fShowLoading)
    {
        document.getElementById(pExistingImageID).src="/img/loader.gif";    // animated gif of your choice
        document.getElementById(pExistingImageID).width=32;
        document.getElementById(pExistingImageID).height=32;
    }
    var img = document.createElement('img');
    img.onload = function (evt) {
        document.getElementById(pExistingImageID).src=this.src;
        document.getElementById(pExistingImageID).width=this.width;   // this is the culprit
        document.getElementById(pExistingImageID).height=this.height; // this is the culprit 
    };
    img.src = pImageURL;
    return false;
}

由此生成的 HTML 看起来像这样

<div id="FramePreviewDiv">
     <img id="fpS" class="img-responsive" width="200" height="244" 
     src="http://www.tpfnew.com/BuildFrame.php?mNo=693&tm=C9885&mm=&bm=C9887&noMats=2&size=200&art=siv1n1-0854.jpg&ft=1&matWidth=2.0&maxWidth=200&maxHeight=400&artWidth=8.25&artHeight=11.5&isCropped=0&xStart=0&yStart=0&croppedPxWidth=&croppedPxHeight=&caw=&cah=" style="padding:4px" alt="">
</div>

width= 来自此处设置的值：

document.getElementById(pExistingImageID).width=this.width;

高度也一样。

我尝试消除该行，但这给了我来自 fShowLoading 代码的 32x32 图像。如果我从 fShowLoading 块中删除宽度和高度 =，我会得到正确尺寸的图像，但在生成的 html 中仍然具有宽度 = 和高度 =。

关于如何消除 width= 和 height= html 生成的任何想法，以便引导程序能够响应地调整图像大小？

4

1 回答 1

0

所以似乎正在发生的事情是因为图像本身有一个height并width分配给image它，使图像变成那些尺寸。因此，与其尝试更改 JS 以删除 JS，不如height只width保留 JS 并用 CSS 覆盖属性，如下所示：

#FramePreviewDiv .img-responsive {
  width: 100%;
  height: auto;
}

这是一个带有示例的 js.fiddle。希望有帮助

于 2016-05-19T18:27:18.137 回答