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

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

为什么ru使用两个类？如果您的两个按钮相同，则仅使用一个类

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 2

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

background-size: cover;

或者

background-size: 100% auto;

Answer 3

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