Firefox和Chrome中的图像差异 [英] Image difference in Firefox and Chrome

问题描述

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

以下是两个区别：
Firefox

Chrome

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

以下是代码：

 < a class =navbar-brandhref =index.html>< img src =img / logo09.pngwidth =250％ height =250％alt =logo>< / a> 
  

有没有快速解决这个问题？感谢您提供任何帮助：）

使用样式表，内联样式或 维度属性 是维护的恶梦 > ...

  height：123px; / *或任何其他固定/动态值，单位* / 
 width：auto; / *让浏览器进行缩放* / 
  

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

另外，在 HTML5 ％不允许在属性 width =和 height =

https：//developer.mozilla。 org / en-US / docs / Web / HTML / Element / img $ b

< img> ; HTML5中的图像的固有宽度 HTML5中的图像的固有宽度 CSS像素或HTML 4（以像素或百分比表示）。

$ b height

HTML5 CSS像素或HTML中图像的固有高度4像素或以百分比表示。




I have a significant difference in a logo image i have when it is displayed in Chrome compared to Firefox (I did my testserver on Firefox and then live in Chrome)

Here are the 2 differences: Firefox

Chrome

It should be appearing as it does in Firefox. I switched the logo and added in image characteristics to make it fit rather than editing the CSS file.

Here is the code:

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

Is there a quick fix to this? Thanks in advance for any help :)

解决方案

Use stylesheet, inline styles or Dimension attributes are a nightmare to maintain...

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

would help (unless you're running into specificity issues)

Also it's goot to know that in HTML5 % are not allowed on attributes width="" and height=""

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

<img> attributes

width
The intrinsic width of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.

height
The intrinsic height of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.

这篇关于Firefox和Chrome中的图像差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！