引導動態圖像生成集，width =

Question

我正在將正在開發的網站轉換為引導程序。 在我的其中一個頁面上，我根據用戶輸入動態創建圖像。

我從這樣的頁面開始：

之后 ：

用戶單擊其中一個雜志封面，然后在左上角生成新圖像。 圖像的其他部分是用戶在其他頁面上做出的選擇。

我的問題是，生成代碼的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塊中刪除width和height =，則會得到正確的尺寸圖像，但在結果html中仍帶有width =和height =。

關於如何消除寬度=和高度= html的生成的任何想法，引導程序將能夠響應地調整圖像大小？

Answer 1

因此似乎正在發生的事情是因為圖像本身具有分配給該image的height和width ，從而使圖像變成了這些尺寸。 因此，與其嘗試更改JS以除去height和width ，不如將JS留在上面並用CSS覆蓋屬性，如下所示：

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

這是一個帶有示例的js.fiddle 。 希望能有所幫助