将CSS宽度和高度添加到jQuery图像元素

Question

I am trying to add css of width and height to this line of jquery. I want my image to have width 160 and height 80. Will some one please tell me what I am doing wrong.

This is the line of code creating my image:

$("#selectedSpecialtyPlateImage").html("<img src='"+selectedLicense.image+"' alt='"+selectedLicense.code+"' />");

What I have Tried:

$("#selectedSpecialtyPlateImage").html("<img src='"+selectedLicense.image+"' alt='"+selectedLicense.code+"' />").width(160).height(80);

(This is doing the div but not the image inside the div)

or

$("#selectedSpecialtyPlateImage").html("<img style="width: 160px; height: 80px;" src='"+selectedLicense.image+"' alt='"+selectedLicense.code+"' />");

I was thinking this would add the style to the image but instead is just breaking my code completely.

Any help with this would be greatly appreciated!

Answer 1

First example is wrong, because you are setting width to element, not to image. Second example is good, but you are using bad quotation marks.

Change this:

style="width: 160px; height: 80px;"

To this:

style='width: 160px; height: 80px;'

---

I think that best way to add image dynamicaly is this:

var img = $('<img />', {
  src: selectedLicense.image,
  alt: selectedLicense.code
});
img.appendTo($('#selectedSpecialtyPlateImage'));

Answer 2

If you need to set the style attributes, you can use jQuery's .css()

What do you think about this solution?

$('div.content img').css({
  'width' : '100px',
  'height' : '100px'
});

Answer 3

Although I am not fan of jQuery, and I really do not prefer to set html elements as string, below snippet should work.

$("#selectedSpecialtyPlateImage")
  .html('<img style="width: 160px; height: 80px;" src=' +selectedLicense.image+' alt='+selectedLicense.code +' />');