Changing logo size

HTML & CSS
1

Hi,

Could someone tell me how to change the size of the header logo I have put on this webpage. I have tried “header-logo-image” as a class in css but it isn’t changing the size of it? Am i going about it completely the wrong way?

http://innov8tivehomes.co.uk

Thanks in advance

2

Hi, ontargett.

The image does resize smaller at the narrowest width of my browser window, but I gather that you want it to resize before then :slight_smile: .

When do you want the image size to change? What will effect that change?

3

Without knowing more about your needs, here are a couple of ways of scaling the size of the image. One has the image inside of its own container, the other has the image along side the <ul>.


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Change Image Size</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1207171-Changing-logo-size
2014.05.01 11:50
ontargett
-->
    <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.outer {
    outline:1px solid red;
    overflow:hidden;  /* or clearfix */
}

ul {
    list-style:none;
    float:right;
    padding:0;
    margin:1em 0;
}
li {
    display:inline-block;
    outline:1px solid blue;
    background-color:#eef;
    padding:.2em .8em;
}

/* image in an "imagebox" */
.imagebox {
    outline:1px solid magenta;
    float:left;
    max-width:30%;  /* the image expands to fit the width of this box */
    margin:0 auto;
}
img.inbox {
    display:block;
    width:100%;
    height:auto;
}
@media screen and (max-width:600px) {
    .imagebox {float:none;}
}

/* image without an "imagebox" */
img.nobox {
    outline:1px solid magenta;
    display:block;  /* display:block is overridden by the float:left; reinstated when the media query kicks in */
    float:left;
    width:auto;    /* the max width of the image is limited to its native width */
    max-width:30%;  /* the width of the image will shrink when it is less than this percent of its container's width */
    height:auto;
    margin:0 auto;
}
@media screen and (max-width:600px) {
    img.nobox {float:none;}
}
    </style>
</head>
<body>

<div class="outer">
    <div class="imagebox">
        <img class="inbox" src="http://innov8tivehomes.co.uk/wp-content/uploads/2014/04/homelogosmallrevise.png" alt="" width="262" height="176">
    </div>
    <ul>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
    </ul>
</div>
<br>
<br>
<div class="outer">
    <img class="nobox" src="http://innov8tivehomes.co.uk/wp-content/uploads/2014/04/homelogosmallrevise.png" alt="" width="262" height="176">
    <ul>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
        <li>MenuItem</li>
    </ul>
</div>

</body>
</html>

Hope this helps.

4

Hi ronpat,

Sorry I don’t think I was clear enough, I just want to resize the image as it is too big in the top left hand corner, I am not too worried about it resizing with the window size.

Hope this makes sense?

5

Hi,

Why not just change the image to the size you want in your paint package :slight_smile:

You can scale it with CSS if you want like this:


#header-logo-image img{width:80%;height:auto;max-width:262px}/* adjust percentage to suit*/
6

That did the job, thanks