CODEWITHSUNDEEP
css
mpen
mpen

Reputation: 282885

How to get logo height to scale responsively?

I'm trying to get my logo to shrink down if the users' browser width is too small. I've got the logo scaling nicely now, but I can't get the h1's height to scale proportionally with the image.

If I remove the height from the CSS then the h1 will just collapse. Neither min-height nor max-height will work. So I'm not sure what to do. How do I get the red border tight around the image?

.logo {
    background-image: url('http://placehold.it/397x68');
    max-width: 397px;
    height: 68px;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    border: 1px solid red;
}
span {
    display: none;
}
 <h1 class="logo"><span>My Title</span></h1>

N.B. It's easier to preview the code above in js fiddle so that you can just slide the vertical divider around to see how it behaves.

Upvotes: 0

Views: 687

Answers (4)

DACrosby
DACrosby

Reputation: 11440

It can be done, but requires an extra wrapper element.

HTML

<div class="wrapper">
     <h1 class="logo"><span>My Title</span></h1>
</div>

CSS

.wrapper {
    position: relative;
    padding-bottom: 17.12%; /* aspect ratio of image */
    margin: 0 auto;
    max-width: 397px; /* image width */
    height: 0;
}
.wrapper .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 68px; /* image height */
    background-image: url('http://placehold.it/397x68');
    background-size: 100%;
    background-repeat: no-repeat;
    border: 1px solid red;
}
.logo span{
    display: none;
}

Modified from this tutorial on how to make YouTube videos responsive, also here on SO.

jsFiddle example.

Upvotes: 1

mpen
mpen

Reputation: 282885

This seems to work:

.logo {
  max-width: 397px;
  max-height: 68px;
}
img {
  width: 100%;
  height: 100%;
}
<div class="logo">
  <img src="http://placehold.it/397x68" alt="My Title">
</div>

Upvotes: 1

user1980175
user1980175

Reputation:

You should check out the following article: http://alistapart.com/article/fluid-images

PS: Don't put your logo inside an h1 tag.

Upvotes: 0

vvondra
vvondra

Reputation: 3162

The issue itself isn't related to the logo at all.

You're trying to create a div with height relatively proportionate to its width. Not possible with HTML+CSS.

Why not just put an there, if it's actually an image. Text can be hidden with some common text replacement technique.

Responsive height proportional to width

Upvotes: 0

Related Questions