bootstrap动态图像生成集width =

Question

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

我从这样的页面开始：

之后：

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

我的问题是生成代码的javascript在HTML中插入width =和height = code。由于这会破坏bootstraps响应图像，我想摆脱它，但我无法弄清楚如何。其他一切都很好。

以下是流程：

我从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 =。

关于如何消除width =和height = html生成的任何想法，所以bootstrap将能够响应地调整图像的大小？

Answer 1

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

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

这是js.fiddle with an example。希望有所帮助