ブートストラップ動的イメージ生成セットwidth =

Question

開発中のサイトをブートストラップに変換しています。私のページの1つでは、ユーザーの入力に基づいてイメージを動的に作成します。

私はこのようなページで開始します。

以降：

ユーザーが雑誌の表紙の一つをクリックして、新しいイメージをして生成されます左上隅。画像の他の部分は、他のページで行われたユーザーの選択です。

私の問題は、コードを生成するJavaScriptがHTMLにwidth =とheight = codeを挿入してしまうことです。これはブートストラップの応答性の高いイメージを打ち負かすので、私はそれを取り除きたいのですが、私はどのように把握できません。他のすべてがうまくいきます。ここで

はプロセスです：

私はHTMLで始まる：

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

ページエントリには画像がありません。デフォルトイメージが生成されます。

お客様がマガジンカバーの1つをクリックすると、要求が発行されます。

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= 

ここでは、このことにより、生成される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> 

のように見えるの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; 
} 

ためのコードがありますT彼の幅=ここで設定された値から来る：

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

高さは同じです。

私は行を削除しようとしましたが、それは私にfShowLoadingコードから32x32イメージを与えます。 fShowLoadingブロックから幅と高さを削除した場合、正しいサイズの画像が得られますが、結果として得られるHTMLではwidth =とheight =のままです。

私はwidth =とheight = htmlの生成を排除することができるので、ブートストラップはイメージのサイズを変更することができますか？

Answer 1

画像自体がimageに割り当てられたheightとを持ち、画像がそれらのサイズになるためです。だからではなく、ただ一人でJSを残し、このようなCSSを持つプロパティを上書きしheightとwidthを削除するJSを変更しようとしているの：

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

ここではjs.fiddle with an exampleです。希望があれば