css 调整移动图像大小的问题

Question

我不是 css 专家，在满足这个需求方面有些挣扎。

Consider this site

现在 Logo 图像的大小适合移动设备，但对于桌面浏览器来说太小了。

如果我更改尺寸以在桌面浏览器上看起来不错，它不会为移动设备缩小尺寸并因此向右膨胀。

我觉得这些是涉及的 css 设置，但当然需要进一步说明。

所以图像大小是 3800 X 1200

我认为的实际图像样式应保持在 100% 且不超过 240 像素。这些设置将使它在移动设备上看起来可以接受，但对于桌面设备来说太小了。

<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%;
} 

....

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

如果我颠倒设置，那么它在桌面上看起来会很棒，而在移动设备上看起来会井喷(不是动态调整大小)？

谢谢

Answer 1

您确定要寻找媒体查询解决方案吗？您可能只需使用响应式图像即可。 JSFiddle

HTML

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

CSS

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

  margin: 0 auto;
 display: block;
}