How to force image to be within mentioned width and height?

Question

I want some css to get the image within mentioned width and height without cropping.

I have done it like this :

.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;}

But, it's not happening. Another button is there but with different size.

.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;}

I want those to be of same size although there actual image size may differ.

Image: Edit Delete Demo

I have already posted the code. I am posting the image describing it. — soham, Jan 17 '13 at 10:48
There is css3 method ( `background-size` ), but css3 is not the tool of choice _if you wish to support older browsers_. Here's a SO question/answer that should answer your question in more detail: http://stackoverflow.com/questions/1341358/set-size-on-background-image-with-css/1341462#1341462 — Joonas, Jan 17 '13 at 12:21

score 0 · Answer 1 · answered Jan 17 '13 at 10:49

0

If you have to resize the background, I don't think it can be done. If your image has the right width and height use background-position to 'crop'.

answered Jan 17 '13 at 10:49

Peter van Ackooij

11
1
2

Actually, yes. I do want to resize it. I want to give width and height and I want the image to be fitted there. – soham Jan 17 '13 at 10:53
There's no background resizing in CSS. What if you'd put an image-tag in the div and used overflow-hidden? – Peter van Ackooij Jan 17 '13 at 10:58
Actually, I can't in fact I don't want to use div. – soham Jan 17 '13 at 11:00

score 0 · Answer 2 · answered Jan 17 '13 at 10:56

0

why r u using two class? if your both button are same so use only one class

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>

answered Jan 17 '13 at 10:56

Pawan Lakhara

1,146
4
16
28

There's image involved and also other concerns. That's why I used two different classes. Can it be solved? – soham Jan 17 '13 at 11:01

estrar · Answer 3 · 2013-01-17T11:05:12.883

0

Have you tried using the CSS3 property background-size?

background-size: cover;

or

background-size: 100% auto;

edited Jan 17 '13 at 11:05

answered Jan 17 '13 at 10:57

estrar

1,373
4
12
37

How to force image to be within mentioned width and height?

3 Answers3