how to keep the aspect ratio of an image in bounding box - CSS

Question

Forgive my severe lack of knowledge here and I apologize if I'm not referring to things correctly. I'm working on a site in Weebly and I'm having trouble with the logo. The image I uploaded is huge and the box for it is only 525px by 200px. With the below information in CSS I get only the top corner of my logo. How can I make the image adjust to the size of the box? Thank you.

#logo{
float: left;
background: transparent url(logotransparent.png)no-repeat;
width: 525px;
height: 200px;
}

Open Paint and resize the image to 525x200 or whatever size that retains the aspect ratio. Probably would be the easiest solution. — Justin Chmura, Jul 08 '13 at 20:34

score 1 · Accepted Answer · answered Jul 08 '13 at 20:58

1

You have 2 posibilities:

background-size: cover;

or

background-size: contain;

The first one will cover all the area, cutting some part of the image.

The second one will make the image as large as posible without cutting the image

Both will keep the aspect ratio of the image.

answered Jul 08 '13 at 20:58

vals

61,425
11
89
138

note that for – Pevara Jul 08 '13 at 21:23
happy that it helped tou ! – vals Jul 09 '13 at 15:52

how to keep the aspect ratio of an image in bounding box - CSS

1 Answers1