2“style”内联css img标签?

时间:2022-02-05 20:35:50

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

我已经输入了两个斜线CSS命令

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

由于某种原因,这幅画有100px高,但没有宽度。我猜这是因为你不能把其中的两个写在同一个标签上。如果这是真的,有没有办法同时分配高度和宽度?我已经为我的外部CSS分配了不同的图像大小,我认为您不能在外部CSS的div标记属性中添加img属性。谢谢

4 个解决方案

#1


8  

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

CSS:

CSS:

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

HTML:

HTML:

<img src="http://img705.imageshack.us/img705/119/original120x75.png" 
                                          class="100pxSquare" alt="25"/>

#2


2  

Do not use more than one style attribute. Just seperate styles in the style attribute with ; It is a block of inline CSS, so think of this as you would do CSS in a separate stylesheet.

不要使用多个样式属性。只是在style属性中分离样式;它是一个内联CSS块,所以可以将其看作是在一个单独的样式表中处理CSS。

So in this case its: style="height:100px;width:100px;"

所以在这种情况下,它的:style="height:100px;width:100px;"

You can use this for any CSS style, so if you wanted to change the colour of the text to white: style="height:100px;width:100px;color:#ffffff" and so on.

对于任何CSS样式都可以使用这个样式,因此如果您想将文本的颜色改为白色:style=“height:100px;width:100px;color:#ffffff”等等。

However, it is worth using inline CSS sparingly, as it can make code less manageable in future. Using an external stylesheet may be a better option for this. It depends really on your requirements. Inline CSS does make for quicker coding.

然而,使用内联CSS是值得的,因为它可以使代码在将来变得更容易管理。使用外部样式表可能是更好的选择。这取决于你的需求。内联CSS确实可以加快编码速度。

#3


2  

You should use :

你应该使用:

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

That should work!!

这应该工作! !

If you want to create class then :

如果你想要创建类,那么:

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

and then apply it like :

然后像:

<img src="http://img705.imageshack.us/img705/119/original120x75.png" class="size" alt="25"/>

by creating a class you can use it at multiple places.

通过创建类,您可以在多个地方使用它。

If you want to use only at one place then use inline CSS. Also Inline CSS overrides other CSS.

如果您只想在一个地方使用,那么就使用内联CSS。同样,内联CSS覆盖了其他CSS。

#4


0  

if use Inline CSS you use

如果使用内联CSS

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

Otherwise you can use class properties which related with a separate css file (styling your website) as like In CSS File

否则,您可以使用与独立css文件(样式化您的网站)相关的类属性,就像在css文件中一样

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

In HTML File

在HTML文件

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

#1


8  

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

CSS:

CSS:

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

HTML:

HTML:

<img src="http://img705.imageshack.us/img705/119/original120x75.png" 
                                          class="100pxSquare" alt="25"/>

#2


2  

Do not use more than one style attribute. Just seperate styles in the style attribute with ; It is a block of inline CSS, so think of this as you would do CSS in a separate stylesheet.

不要使用多个样式属性。只是在style属性中分离样式;它是一个内联CSS块,所以可以将其看作是在一个单独的样式表中处理CSS。

So in this case its: style="height:100px;width:100px;"

所以在这种情况下,它的:style="height:100px;width:100px;"

You can use this for any CSS style, so if you wanted to change the colour of the text to white: style="height:100px;width:100px;color:#ffffff" and so on.

对于任何CSS样式都可以使用这个样式,因此如果您想将文本的颜色改为白色:style=“height:100px;width:100px;color:#ffffff”等等。

However, it is worth using inline CSS sparingly, as it can make code less manageable in future. Using an external stylesheet may be a better option for this. It depends really on your requirements. Inline CSS does make for quicker coding.

然而,使用内联CSS是值得的,因为它可以使代码在将来变得更容易管理。使用外部样式表可能是更好的选择。这取决于你的需求。内联CSS确实可以加快编码速度。

#3


2  

You should use :

你应该使用:

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

That should work!!

这应该工作! !

If you want to create class then :

如果你想要创建类,那么:

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

and then apply it like :

然后像:

<img src="http://img705.imageshack.us/img705/119/original120x75.png" class="size" alt="25"/>

by creating a class you can use it at multiple places.

通过创建类,您可以在多个地方使用它。

If you want to use only at one place then use inline CSS. Also Inline CSS overrides other CSS.

如果您只想在一个地方使用,那么就使用内联CSS。同样,内联CSS覆盖了其他CSS。

#4


0  

if use Inline CSS you use

如果使用内联CSS

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

Otherwise you can use class properties which related with a separate css file (styling your website) as like In CSS File

否则,您可以使用与独立css文件(样式化您的网站)相关的类属性,就像在css文件中一样

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

In HTML File

在HTML文件

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