Reputation: 32143
I have an image that I need to place to the right of content on the left. I've determined, to do this, it will require that I absolutely place the object. I also need the image to stay its same size IF the size is smaller than the image tags defined size, if not, the image needs to scale itself down to fit within the borders. Is this all possible?
Thanks if you can!
I'm using HTML, CSS, and JavaScript (ONLY IF REQUIRED PLEASE!)
Here is some code to look at :)
function createQuestions(id) {
var tReturn="<form style=\"text-align: left;width: 33.33333%;background-color: lightblue;border=1px solid #000000;padding: 10px\">";
tReturn=tReturn+"<b>Questions "+(id+1)+":</b><br /> <i>"+Questions[id].Question+"</i><br /><br />";
for (var i=0,l=Questions[id].Values.length;i<l;i++) {
tReturn=tReturn+"<input onClick=\"checkAnswer("+id+","+i+",this)\" type=\"button\" value=\""+Letters[i]+"\" style=\"width:50px\" />. "+Questions[id].Values[i]+"<br />";
}
//V----- THIS LINE BELOW!
//tReturn=tReturn+"<img src='images/test.jpg' style=' />"
tReturn=tReturn+"</form>";
return tReturn;
}
Upvotes: 0
Views: 260
Reputation: 8942
Try using max-width
and max-height
to solve that second problems - so if you want an image that's no bigger than 400px wide but otherwise sizes to fit itself, do:
<img src="../blah/img.jpg" style="max-width:400px" />
For aligning it to the right, try the float:right
style or applying text-align:right
on it's parent container, or position:absolute; right:0px
Upvotes: 1