如何强制图像在提到的宽度和高度？

Question

我想要一些css来获取所提及的宽度和高度的图像而不进行裁剪。

我这样做了：

.btnEdit{ background-image: url(/images/btn_Edit_PICO.gif); 
    cursor:pointer;
    margin: 0;
    padding: 0;
    border: 0;
    background-repeat: no-repeat;
    background-color: transparent;
    height: 22px ; 
    width: 54px;} 

但是，它没有发生。另有一个按钮，但尺寸不同。

.btnDelete{background-image: url(/images/btn_Delete_PICO.gif); 
cursor:pointer; 
margin: 0;
padding: 0;
border: 0;
background-repeat: no-repeat;
background-color: transparent; 
height: 22px ;
width: 54px;}

我希望那些尺寸相同但实际图像尺寸可能不同。

图像：

Answer 1

如果你必须调整背景大小，我认为不可以。如果您的图像具有正确的宽度和高度，请使用背景位置来“裁剪”。

Answer 2

为什么你要用两节课？如果你的两个按钮都相同，那么只使用一个类

CSS

    .btn
    { 
    background:blue; 
    cursor:pointer; 
    margin: 0; 
    padding: 0;
    border: 0;
    background-repeat: no-repeat;
height: 22px ; 
width: 54px;
    } 

HTML

<div class="btn">
<input type="Button" value="EDIT"/>
</div>

<div class="btn">
<input type="Button" value="Delete"/>
</div>

Answer 3

您是否尝试过使用CSS3属性background-size？

background-size: cover;

或

background-size: 100% auto;