图像大小在 Mozilla 和 IE 中不起作用

Posted 2023-03-06

【中文标题】图像大小在 Mozilla 和 IE 中不起作用

【英文标题】：image size not working in mozilla and IE

【发布时间】：2016-11-23 10:08:00

【问题描述】：

我的代码在 Google Chrome 中运行良好，但在 Firefox 和 IE 中无法运行。

<asp:Image ID="Image1" runat="server" CssClass="image" />

Css 代码：

.image
 width:50px;
 height:50px; 
 content:url('Image.png'); 

.image:hover
 width:50px;
 height:50px; 
 content:url('Image_Hover.png'); 

【参考方案1】：

CSS：

.my-img
          width:100px;
          height:100px;
          background-image: url('Image.png');
        
     .my-img:hover 
            background-image: url('Image_Hover.png');
        

html：

<div class="my-img"></div>

试试这个。

【讨论】：

您正在使用 ID。相反，他想在课堂上使用它。

你也可以给class而不是id。添加类属性并将“#”替换为“.”。工作相同。你可以试试。

您以前的版本不适合他，因为他没有这些 ID。基本上类和 ID 不一样，但是是的，您的示例应该可以工作。

【参考方案2】：

SO 上的不同人正在解决相同的问题。一种解决方案是将content (...) 更改为background-image。在您的情况下，它将是：background-image: url('Image.png');（或悬停图片）

查看this post 了解更多详情。 Stuart Kershaw 解释了其中一个 cmets 中的这种行为：

我不知道为什么它在 Chrome 中有效，但对此的解释是您不能将 content 属性与 :hover 选择器一起使用。 content 用于 :before/:after 伪元素。 ——

编辑：您的代码的完整示例，根据链接帖子中的信息进行了更改：

 .image 
    height: 50px;
    width: 50px;
    display: block;
    background-image: url('Image.png');


.image:hover 
    background-image: url('Image_Hover.png');

编辑 2：如果两个图像的大小相同，并且您每次都使用 CSS 将它们的大小减小到 50x50，您可以将图像大小缩放到 50x50 并使用较小的图像，这样您就没有每次都用 CSS 来做。我更喜欢使用 GIMP，但我敢打赌，有很多免费的在线工具可以将您的图像调整到所需的大小。

【讨论】：

我尝试了这个背景图像及其工作发现，但图像大小不起作用如何做到这一点

它们的大小是否不同并且您想将它们的大小限制为 50 像素？它们的尺寸是一样的还是一张图片比另一张大？

@no 两者大小相同

你也使用display: block;吗？就像链接帖子中所说的那样，设置display: block; 很重要。请参阅我编辑的帖子。

仅供参考：也可以使用 zoom 或 zoom-out，但 zoom 不适用于 FF（并且仅不适用于 Firefox），zoom-out不适用于 IE，安卓、Safari 和 Opera。来源：***.com/questions/19772960/css-hover-image-not-working-on-firefox-but-works-on-chrome

【参考方案3】：

您还没有为图像指定任何浮动位置。试试float:left 它会起作用的