图像高度和宽度被css覆盖

时间:2016-12-06 20:14:43

标签: html css

<img src="img_forest.jpg" alt="Forest" width="600" height="400">

我的html body标签中有上面这一行。但是这里指定的高度和宽度被样式表中为img指定的高度和宽度所覆盖。

为什么会这样?

4 个答案:

答案 0 :(得分:1)

此时您将进入更多样式图像元素。 widthheight 属性最初告诉浏览器在页面加载时需要在屏幕上为这些图像制作必要的空间。

  

提示:始终指定图像的高度和宽度属性。如果设置了高度和宽度,则在加载页面时会保留图像所需的空间。但是,如果没有这些属性,浏览器就不知道图像的大小,也无法为其保留适当的空间。效果将是页面布局在加载过程中会发生变化(图像加载时)。

http://www.w3schools.com/TAgs/att_img_width.asp

答案 1 :(得分:0)

尝试使用内联样式覆盖您的css文件或更多指定html页面中图像的css选择器。

<img src="img_forest.jpg" alt="Forest" style='width:600px !important; height:400px !important;'>

答案 2 :(得分:0)

这是因为widthheight属性设置了图片的固有宽度和高度。

默认情况下,widthheight CSS属性的值为auto。由于图像是替换元素,这意味着将使用内在大小(§10.3.2§10.6.2)。

但是,您可以使用某些声明覆盖它,然后当然图像将以指定的大小显示。

如果您不想这样做,请添加无法覆盖的重要内联样式:

<img src="img_forest.jpg" alt="Forest" width="600" height="400"
     style="height: auto !important; width: auto !important" />

&#13;
&#13;
img {
  height: 100px;
  width: 500px;
}
&#13;
<img src="/favicon.ico" alt="Forest" width="16" height="16"
     style="height: auto !important; width: auto !important" />
&#13;
&#13;
&#13;

答案 3 :(得分:0)

您可以看到width="600"是属性,但width:100px是属性。渲染这些属性时会转换为相应的样式并放在样式表的开头。

检查已接受的答案Click here。这就是你想要的。