Question

我对一堆图片有疑问。

我有图像路径并尝试在浏览器中加载它们。

其中一些人在我的Chrome浏览器中显示了css样式表，如下所示

element.style {
  -webkit-user-select: none;
}

但我的一些图片的css风格如

element.style {
  -webkit-user-select: none;
  cursor: -webkit-zoom-in;
}

img[Attributes Style] {
  width: 1275px;
  height: 963px;
}

我只使用

这样的地址加载这些图像

http://www.testproject.com//image/test.png

为什么有些图像会设置宽度和高度？我可以删除它们吗？

非常感谢！

Answer 1

比较Chrome开发工具中 this fiddle 中的以下2个img代码。

<img src="http://i.imgur.com/GTUxoqj.png">
<img src="http://i.imgur.com/GTUxoqj.png" width="200" height"200">

以下风格

img[Attributes Style] {
  width: 200px;
}

仅出现在第二个属性上，并出现在灰色背景上的Chrome开发工具中，因为它不是来自文档中的CSS样式或来自外部样式表。第二个图像上设置了宽度和高度属性。开发工具向您显示，对于该图像，宽度受属性值（与CSS样式相反）的影响。灰色背景意味着它不是您可以通过开发工具修改的CSS属性。 Chrome在默认样式方面具有类似的行为，它适用于某些原本没有样式的元素。

Answer 2

从它的声音。你的图像正在拿起Chrome的用户样式表。以下是user select property的一些好消息。由于您加载的任何css都应该在存在时覆盖这些样式，您可以执行以下操作之一...

将宽度/高度属性添加到图片标记

<img src="http://www.testproject.com//image/test.png" height="100" widith="100">

或

添加一个类来控制大小

HTML
<img src="http://www.testproject.com//image/test.png" class="test_image">

CSS
.test_image {width:100px;height:100px;}

希望有所帮助！

简单图像css属性问题

2 个答案: