開発中のサイトをブートストラップに変換しています。私のページの 1 つで、ユーザー入力に基づいて画像を動的に作成します。
次のようなページから始めます。
以降 ：
ユーザーが雑誌の表紙の 1 つをクリックすると、左上隅に新しい画像が生成されます。画像の他の部分は、他のページでユーザーが選択したものです。
私の問題は、コードを生成する 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 の生成を排除して、ブートストラップが画像のサイズをレスポンシブに変更できるようにする方法について何か考えはありますか?