Search code examples
cssaspect-ratio

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

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

  • 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.