Image sizing problems across different resolutions

I have a two-part header. The left 20% holds an image (our logo) and the right 80% is navigation, etc.

The width of the header itself, as well as either part of it, is expressed with percentages. The height is expressed with em. This results in a quite fluid layout. The only problematic area is the logo - since it is not the same dimensions as the container, it will go from fitting perfectly in certain resolutions, to getting squeezed too small and being forced up top on other resolutions.

The only CSS applied to the image is a开发者_JS百科 width inside the container and a margin.

How can I ensure that the logo fills the entire container regardless of resolution?

---

You'd give the logo a percentage width as well (likely 100% to fill the container). Keep in mind that in doing that, you are at the mercy of the browser's image scaling abilities which may produce less than desirable results in some cases.

That said, it sounds like you are scaling with two entirely different variables: horizontal scaling based on the viewport width, and vertical scaling based on the font size settings. While I applaud your goal for flexibility, maybe rethink the need to scale the logo itself. Not everything on the page needs to scale.

---

You might want to consider adding a min-width to your image or it's container to make sure it only gets "squeezed" to a certain extent.