bootstrap動態圖像生成集寬度=

我正在開發一個網站轉換爲引導。在我的一個頁面上，我根據用戶輸入動態地創建一個圖像。bootstrap動態圖像生成集寬度=

我開始一個頁面是這樣的：

而經過：

上雜誌封面之一，新的圖像用戶點擊的產生左上角。圖像的其他部分是用戶在其他頁面上進行的選擇。

我的問題是，在HTML中生成代碼插入寬度=和高度=代碼的JavaScript。由於這會導致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>

代碼Ť他的寬度=來自這裏設置的值：

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

相同的高度。

我試圖消除這條線，但是這給了我一個fShowLoading代碼的32x32圖像。如果我從fShowLoading塊中刪除寬度和高度=，我會得到合適大小的圖像，但仍然會在生成的html中使用width =和height =。

有關如何消除width =和height = html代的任何想法，bootstrap將能夠響應地調整圖像大小？

來源

2016-05-18 Larry Peterson

什麼CSS屬性您使用的.IMG響應幫助？ – crazymatt

我並沒有改變引導CSS的.IMG響應從https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css「code'.img響應 { 顯示：塊; max-width：100％; 高度：汽車 } –

所以似乎正在發生的是因爲圖像本身有一個height和width分配給image其使圖像變成這些尺寸。因此，而不是試圖改變JS與CSS刪除height和width剛剛離開JS單獨和覆蓋性能是這樣的：

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

這裏是一個js.fiddle with an example。希望

來源

2016-05-19 18:27:18 crazymatt

bootstrap動態圖像生成集寬度=

回答

相關問題