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: 
This seems to work:

```css
.logo {
  max-width: 397px;
  max-height: 68px;
}
img {
  width: 100%;
  height: 100%;
}
```

```html
<div class="logo">
  <img src="http://placehold.it/397x68" alt="My Title">
</div>
```
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)