Question

can you set the the image size of this control with css?

<img style="border-width: 0px;" alt="Test image" src="userdata/1/uploadedimage/database%20entry.jpg">

Not sure if theres a way I can assign a certain size to this either by css or by Jquery? Or if I can do it directly in my C# code using something like img.Style?

EDIT:

Just to clarify my css is like so:

div .test
{
  width:90%; 
  z-index:1; 
  padding:27.5px; 
  border-top: thin solid #736F6E;
  border-bottom: thin solid #736F6E;
  color:#ffffff;
  margin:0 auto;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

And my code dynamically assigns images on the fly within my div when a user types something into a textbox (the div is also dynamically assigned)

while (reader.Read())
                    {
                        System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
                        div.Attributes["class"] = "test";
                //div.Style["float"] = "left";

                        div.ID = "test";
                        Image img = new Image();
                        img.ImageUrl = String.Format("{0}", reader.GetString(1));
                        // this line needs to be represented in sql syntax
                        //img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
                        img.AlternateText = "Test image";

                        div.Controls.Add(img);
                        div.Controls.Add(ParseControl(String.Format("{0}", reader.GetString(0))));
                        div.Style["clear"] = "both";
                        test1.Controls.Add(div);

So how would I use the below answers in this combination

Answer 1

Absolutely. <img> tags accept both height and width declarations through CSS. If you wanted to do it inline, it’d be (for height and width values of 100px):

<img style="border-width: 0px; width:100px; height:100px;" alt="Test image" src="userdata/1/uploadedimage/database%20entry.jpg" />

Better would be to use CSS targeting instead of inline:

<style type="text/css">
    img {border-width:0px; width:100px; height:100px;}
</style>

And your img tag would then be:

<img alt="Test image" src="userdata/1/uploadedimage/database%20entry.jpg" />

That would apply to all img tags on the page (which is probably not what you want) so you can add a class (or id) to the image to further refine the CSS selection:

<style type="text/css">
    img.mySize {border-width:0px; width:100px; height:100px;}
</style>

<img class="mySize" alt="Test image" src="userdata/1/uploadedimage/database%20entry.jpg" />

Use the dot for class declarations. Use the # for id’s.

Incidentally, if you want to maintain proportions, you can simply define the width without the height. Browsers will automatically adjust the height per the aspect ratio.

jQuery provides access to altering many CSS properties of nodes:

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