我如何使一个图像适合一个按钮在css？

ogq8wdun 于 2023-08-09 发布在其他

关注(0)|答案(4)|浏览(112)

我在我的网站上创建了两个按钮，当你将鼠标悬停在它们上面时，我计划将它们转换为图像。我遇到的问题是，悬停后，图像不太适合在盒子里面（它太大了）。我如何调整它的大小，使它正确地适合在框内后，悬停在他们？
下面是HTML：

<a href="link.html">
<div class="main-button">
<h2 class="main-text">Maintenance</h2>  
</div></a>

<a href="link2.html">
<div class="docs-button">   
<h4 class="docs-text">Other Documents</h4>  
</div></a>

字符串
关于CSS：

.main-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #0099DF;
margin-left:100px;
float:left;
}

.main-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:40px;
margin-top:150px;
}

.docs-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #545454;
margin-right:100px;
position:fixed; 
right:30%;
float:center;
}

.docs-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:60px;
margin-top:120px;
}

.main-button:hover {
background-image:url('../images/settings.png');

}

.docs-button:hover {
background-image:url('../images/documents.png');
}

型

css

来源：https://stackoverflow.com/questions/23001031/how-do-i-make-an-image-fit-inside-a-button-in-css

4条答案

按热度按时间

eblbsuwk1#

尝试background-size:cover-例如。

.main-button:hover {
    background-image:url('http://placekitten.com/200/300');
    background-size:cover;
}

.docs-button:hover {
    background-image:url('http://placekitten.com/g/200/300');
    background-size:cover;
}

字符串

赞(0）回复(0）举报 2023-08-09

643ylb082#

background-size：contain如果你想看到所有的图像，或者100%100%，以100%的宽度和100%的高度，但在这种情况下，你的图像可以是shell

赞(0）回复(0）举报 2023-08-09

i2loujxw3#

你好TheOrangeRemix，
我有一个可行的办法来解决你的问题。我的第一步将是看看你的形象的属性，并得到尺寸，例如。100x100、255x100等。
在这里，您需要将该比例转换为百分比。这是我在计算比率百分比时经常使用的工具：Ratio to Percentage Calculator
一旦你有你的百分比（我将使用1：2，这给了我50%的百分比）。你想创建一个锚点标签（<a>）并给予它一些样式：
（注意：这可能有点过度设计，但它确实做到了你想要的。）

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  margin: 0;
}

.wrapper {
  height: 100%;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: #fff;
}

.mainButton {
  display: inline-block;
  padding-top: 50%;
  width: 100%;
  background: url('https://via.placeholder.com/100x50');
  background-size: 100% 100%;
  position: relative;
}

.mainButton .text {
  font-size: 22px;
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

个字符

赞(0）回复(0）举报 2023-08-09

vbopmzt14#

加入：

width="100%" height="100%"

字符串
到img属性为我工作

赞(0）回复(0）举报 2023-08-09

我来回答

我如何使一个图像适合一个按钮在css？

4条答案

相关问题

热门标签

最新问答