CODEWITHSUNDEEP
htmlcss
Chance Moore
Chance Moore

Reputation: 21

My logo image in my header isn't changing size when I define a smaller size in CSS

Website Screenshot : My logo image is by default 264x84px. It's going in a header that is 69px high, and the height has been defined as 50px, but the logo won't change size. It's bigger than the header

I've tried setting max-height and messing around with that, and then just setting it even smaller to see if that helped, but it won't resize at all

///html///

<div class='heading'>
        <a class='logo' href="../index.html"><img src="img-tea-cozy-logo.png"></a>

///html///

///css///

.logo {
    height: 50px;
    float: left;
}

.heading {
    position: fixed;
    width: 100%;
    top: 0;
    border-bottom: 1px solid seashell;
    height: 69px;
}

///css///

I don't understand why the image is staying the same size

Upvotes: 2

Views: 1808

Answers (4)

LittleDTLe
LittleDTLe

Reputation: 39

This will set the image height to 50px

.logo img {height: 50px;}

Whereas this will set the link height to 50 px

.logo { height: 50px;}

Upvotes: 0

dolanoadriano
dolanoadriano

Reputation: 182

.logo {
    height: 50px;
    float: left;
}

.heading {
    position: fixed;
    width: 100%;
    top: 0;
    border-bottom: 1px solid seashell;
    height: 69px;
}

.heading img {
    height: 100%;
    /* or */
    max-height: 100%;
}

Upvotes: 0

Kevin Vandy
Kevin Vandy

Reputation: 431

You are setting the height of the link instead of the height of the image inside the link.

Change 

.logo {height: 50px;}

to

.logo img {height: 50px;}

Upvotes: 1

Snapstromegon
Snapstromegon

Reputation: 360

You'll need to set the height of the image directly or set object-fit on it. The current way the images will expand over the borders of the parent element.

Upvotes: 1

Related Questions