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?

```css
.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;
}
```

```html
 <h1 class="logo"><span>My Title</span></h1>
```

N.B. It's easier to preview the code above in [js fiddle](http://jsfiddle.net/mnpenner/0hf5py0c/) so that you can just slide the vertical divider around to see how it behaves.

Answer: 
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](https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php), also [here on SO](https://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width).

[jsFiddle example](http://jsfiddle.net/daCrosby/0hf5py0c/1/).
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](https://stackoverflow.com/questions/11535827/responsive-height-proportional-to-width)