包含动态图像的 Html 按钮 - 调整大小答案

【问题标题】：Html button containing an dynamic image - Sizing包含动态图像的 Html 按钮 - 调整大小
【发布时间】：2014-12-21 14:20:02
【问题描述】：

我想显示嵌入在按钮中的图像。该图像是动态的，我希望将图像显示为背景，因为我想在悬停和单击时更改图像。我面临的困难是：我希望按钮根据背景图像的大小调整大小。由于图像是动态的，我事先不知道它的大小。示例：

 <button id="rock" style='background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png)'>Test Rock</button>

http://jsfiddle.net/5z1L67fw/1/

我的其他选择是在按钮元素上包含一个 img 子元素。但是，在这种情况下，是否可以在悬停和按下时更改图像？

【问题讨论】：

标签： html image css button

【解决方案1】：

你可以用img作为children来做到这一点。

演示：http://jsfiddle.net/lotusgodkk/5mn0szq6/

在按钮内保留两个 img 标签。最初只显示一个标签。当按钮悬停时，隐藏可见的图像并显示隐藏的图像。同样的逻辑也可以应用于点击/按下。

HTML：

<button>
    <img class="a" src="http://www.lorempixel.com/600/200/sports/1/" />
    <img class="b" src="http://www.lorempixel.com/600/200/sports/2/" />
</button>

CSS：

button {
    width:600px;
    height:200px;
    overflow:hidden;
}
.b {
    display:none;
}
button:hover .b {
    display:block;
}
button:hover .a {
    display:none;
}

这仅适用于悬停效果。您必须为点击处理程序编写 javascript。

对于可变宽度，只需从按钮中删除尺寸。该按钮将根据新的图像大小自行调整。

演示：http://jsfiddle.net/lotusgodkk/5mn0szq6/1/

【讨论】：

@ViruZX 有什么不同吗？您可以从按钮中删除尺寸，并根据新的可见图像，按钮将自行调整。
@ViruZX : 这是演示给你看：jsfiddle.net/lotusgodkk/5mn0szq6/1

【解决方案2】：

如果您使用子图像，您可能无法在图像上显示文本。因此，您可以在鼠标悬停（悬停）时动态更改背景图像。

请看这个演示：
https://jsfiddle.net/cyB7B/722/

<button type="image" 
style="background-image: url('http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png')"
 onmouseover="this.style.backgroundImage = 'url( \'https://www.google.co.uk/images/srpr/logo3w.png\')'"

 onmouseout="this.style.backgroundImage = 'url( \'http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png\')'"

> Soem Text
    </button>

【讨论】：

【解决方案3】：

你可以使用这个css：

button {
    font-size: 18px;
    border: 2px solid #AD235E;
    border-radius: 100px;
    background-repeat: no-repeat;
   background-size: contain;
    background-position: center;
}

【讨论】：

背景尺寸：包含；调整背景而不是容器。