CSS trouble resizing image for mobile

Question

I'm not a CSS expert and struggling a bit with this need.

Consider this site

Right now the logo image is sized nicely for mobile but looks way too small for desktop browser.

If I change the size to look good on desktop browser it doesn't size down for mobile and consequently blows out to the right.

I feel these are the CSS settings involved but of course open to further instruction.

So the image size is 3800 X 1200.

The actual image style I THINK should remain at 100% and not exceed 240px. These settings will make it look acceptable for the mobile but then too small for desktop.

<img alt="Northern Legacy Auto" title="Northern Legacy Auto" src="http://localhost:15536/content/images/thumbs/0000020.png">

@media (min-width: 240px)
.header-logo a img {
 max-width: 100%;
} 

<a href="/" class="logo">....</a>

@media (min-width: 240px)
.header-logo a {
  display: inline-block;
  /* width: 195px; */
  height: 118px;
  line-height: 0;
background-repeat: no-repeat;
}

If I reverse the settings then it will look great on the desktop and blowout (not dynamically resize) on the mobile?

Answer 1

Are you sure you are looking for the media query solution? You might can just get away with a responsive image. JSFiddle

HTML

<img src="http://placehold.it/200x100">

CSS

img {
  width: 90%;
  max-width: 240px;

  margin: 0 auto;
 display: block;
}