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

背景のサイズを変更する必要がある場合、それはできないと思います。画像の幅と高さが適切な場合は、background-position を使用して「トリミング」します。

Answer 2

なぜ2つのクラスを使用するのですか？両方のボタンが同じ場合は、1 つのクラスのみを使用してください

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;