Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

2 "style" inline css img tags?

Tags:

html

css

I have the following tag

<img src="http://img705.imageshack.us/img705/119/original120x75.png"style="height:100px;" 
style="width:100px;" alt="25"/>

I have put two incline CSS commands in

style="width:100px;"
style="height:100px;"

For some reason the picture has 100px height but no width. I assume this is because you can't write two of these in a row in the same tag. If this is true, is there a way to assign both the height and width? I have already assigned a different image size on my external CSS, and I don't think you can add img properties in the div tag properties on the external CSS. thanks

like image 571
user2095044 Avatar asked Feb 21 '13 10:02

user2095044


People also ask

Is IMG tag inline?

It is an inline and empty element, which means that it doesn't start on a new line and doesn't take a closing tag (unlike the paragraph ( <p> ) tag, for instance). The <img> tag takes several attributes, of which src , height , width , and alt are the most important.

How do you add two inline styles in HTML?

Inline Style SyntaxThe attribute starts with style , followed by an equals sign, = , and then finally uses double quotes, "" , which contain the value of the attribute. In our case, the value of the style attribute will be CSS property-value pairs: "property: value;" .

Can you add style to IMG tag?

A style attribute on an <img> tag assigns a unique style to the image. Its value is CSS that defines the appearance of the image.

How do I insert an image into inline style?

To add images to a page, we use the <img> inline element. The <img> element is a self-containing, or empty, element, which means that it doesn't wrap any other content and it exists as a single tag. For the <img> element to work, a src attribute and value must be included to specify the source of the image.


1 Answers

You don't need 2 style attributes - just use one:

<img src="http://img705.imageshack.us/img705/119/original120x75.png" 
                                     style="height:100px;width:100px;" alt="25"/>

Consider, however, using a CSS class instead:

CSS:

.100pxSquare
{
  width: 100px;
  height: 100px;
}

HTML:

<img src="http://img705.imageshack.us/img705/119/original120x75.png" 
                                          class="100pxSquare" alt="25"/>
like image 65
Oded Avatar answered Sep 20 '22 14:09

Oded