bootstrap dynamic image generation sets width=

Question

I am converting a site under development to bootstrap. On one of my pages I dynamically create an image based on user input.

I start with a page like this:

And after :

The user clicks on one of the magazine covers and a new image is generated in the upper left corner. Other parts of the image are user choices made on other pages.

My problem is that the javascript generating the code insert width= and height= code in the HTML. Since this defeats bootstraps responsive images, I want to get rid of that but I can't figure out how. Everything else is working fine.

Here is the process:

I start with the HTML:

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

There is no image on page entry. A default image is generated.

When the customer clicks on one of the magazine covers a request is issued.

getImage('fpS', buildFrameUrl ( 200  ), true);

The function buildFrameUrl returns something like this:

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=

Here is the code for 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;
}

The HTML generated by this looks like this

<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>

The width= comes from the value set here:

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

Same same for the height.

I tried eliminating the line but that gives me a 32x32 image from the fShowLoading code. If I delete the width and height= from the fShowLoading block, I get the right size image but still with the width= and height= in the resultant html.

Any thoughts on how I can eliminate the generation of the width= and height= html so bootstrap will be able to resize the images responsively?

I haven't changed the bootstrap css for .img-responsive from https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css 'code'.img-responsive { display:block; max-width:100%; height:auto } — Larry Peterson, May 19 '16 at 14:16

score 0 · Answer 1 · answered May 19 '16 at 18:27

So what seems to be happening is because the image itself has a height and width assigned to the image its making the image become those sizes. So instead of trying to change the JS to remove the height and width just leave the JS alone and overwrite the properties with CSS like this:

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

Here is a js.fiddle with an example. Hope that helps

bootstrap dynamic image generation sets width=

1 Answers1