How to get logo height to scale responsively?

Question

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.

@KaloyanIvanov Yes. I care about appearance way more than I care about semantics. — mpen, Feb 28 '15 at 19:57
It seems you already found a solution. :) I would just remove the height of the `.logo` element and use `max-width: 100%; height: auto;` for the image. — Kaloyan, Feb 28 '15 at 20:10

score 1 · Answer 1 · answered Feb 28 '15 at 19:32

1

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>

answered Feb 28 '15 at 19:32

mpen

272,448
266
850
1,236

score 1 · Answer 2 · edited May 23 '17 at 11:56

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.

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

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

edited May 23 '17 at 11:56

Community

1
1

answered Feb 28 '15 at 19:18

vvondra

3,022
1
21
34

score 0 · Answer 4 · answered Feb 28 '15 at 19:21

0

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

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

answered Feb 28 '15 at 19:21

How to get logo height to scale responsively?

4 Answers4