Question

我在Chrome浏览器中显示的徽标图像与Firefox相比有显着差异（我在Firefox上运行了测试服务器，然后在Chrome中运行）

以下是两个不同之处：火狐

铬

它应该像在Firefox中一样出现。我切换了徽标并添加了图像特征以使其适合而不是编辑CSS文件。

以下是代码：

<a class="navbar-brand" href="index.html"><img src="img/logo09.png" width="250%" height="250%" alt="logo"></a>

有快速解决方法吗？在此先感谢您的任何帮助：）

Answer 1

使用样式表，内联样式或 Dimension attributes 是噩梦维持 ......

height: 123px; /*or any other fixed/dynamic value, unit*/
width: auto;   /*let the browser do the scaling */

会有所帮助（除非你遇到特殊问题）

同样知道属性 %和width=""

HTML5 height=""不允许

<img>属性

<强>宽度
  图像的固有宽度为 HTML5 CSS像素，或HTML 4（以像素为单位）或百分比。

<强>高度
  图像的固有高度为 HTML5 CSS像素，或HTML 4（以像素为单位）或百分比。

Answer 2

用固定的像素宽度替换百分比宽度。 Firefox和Chrome以不同的方式注册％测量值，因为容器的布局略有不同。此外，将测量值添加到类中，然后给出!Important属性。我相信Chrome在其访问过的所有网站上都有一个css文件，它提供了一些设计布局等。

更新：在您发表评论之后，尝试在元素中查看开发人员工具，看看是否有覆盖它的东西。如果没有，那么我不确定该建议什么。也许采用不同的设计，例如内部元素的居中div，或者使用带有此徽标的导航栏，或者没有栏的集中徽标。有很多选择。对不起，我无法提供更多帮助

Answer 3

您可能遇到的问题可能与您使用百分比有关。你把它们设定为250％但是百分比是多少？它应该是父元素，但父元素设置为什么？图像的父级是锚元素，它没有设置宽度，也不是块级元素。

尝试将父元素设置为某个固定宽度，然后查看问题是否消失或两个浏览器是否显示相同内容。

例如，我将封闭的锚元素设置为display:block;并将其宽度设置为500px。

`<img>`属性

<img>属性