响应式 CSS；图像移动到下一行而不是缩小

Question

我正在尝试为手机制作一个响应式页面，当视口非常小时（即纵向的小屏幕）时会做出响应。我在标题中有三个元素，菜单的“汉堡包”、徽标/主页链接和篮子图标。用户能够使用菜单和购物篮按钮很重要，当视口宽度太小而无法容纳所有内容时，我试图让徽标缩小。

目前，当宽度缩小时，图像会放到下一行，而不是缩小到比例。

标记：

<header>
  <div class="btn-menu">
    <a href="" id="menubutton">
      <img src="/images/theme/mobile/v3/en/buttons/btn-menu3.png">
    </a>
  </div>  
  <div class="btn-home">
    <a href="/" class="logo">
      <img alt="Home" src="/images/theme/mobile/v3/en/layout/logo-new.png">
    </a>
  </div>
  <div class="btn-basket">
    <a href="/basket" id="basketbutton" class="header-button">
      <img alt="Basket" src="/images/theme/mobile/v3/en/buttons/btn-basket2.png">
    </a>
  </div>
</header>

CSS：

header {
  position: relative;
  text-align: center;
  z-index: 10001;
  background-color: #fff;
  border-bottom: 8px solid #cc0033;
  height: 48px;
  overflow: hidden;
  width: 100%;
}
header div.btn-home > a, img {
  height: auto;
  max-width: 100%;
}
div.btn-menu {
    display: inline-block;
    float: left;
    width: 48px;
}
div.btn-home {
    display: inline-block;
    max-width: 199px;
}
div.btn-basket {
    width: 60px;
    display: inline-block;
    float: right;
    position:
}

btn-menu 和 btn-basket 上的固定宽度是故意的，我不希望它们改变，只有 btn-home 需要响应视口大小。

这是示例的fiddle。我添加了一个带有 CSS 宽度过渡的按钮来模拟视口缩小。在生产中，它应该只渲染到适当的大小，并在横向和纵向之间切换时进行更改。溢出：隐藏被禁用以显示图像的最终位置。

Answer 1

我拿了你的代码并做了一些修改。 这是 JSFiddle 上的解决方案：http://jsfiddle.net/rmdymm55/

说明：

我在页眉中添加了一个最大高度，但这不是必需的，我只是出于实践这样做。

我完全删除了这个：

header div.btn-home > a, img {
    height: auto;
    max-width: 100%;
}

因为我选择了这样声明：

div.btn-home img {
    max-width: 40%;
    margin-left: -50px;
}

两者都应该有效，但我在应用的位置上更具选择性。只有<div class="btn-home"> 内的图像。注意我是如何做margin-left的：-50px。也就是说，当它缩小时，徽标仍然居中。不过，真正的技巧是 Home 按钮所在的位置。您必须在 .btn-home img 上执行以下操作：

display: inline; /* This will keep it in one line */
width: auto; /* for resizing */
height: auto; /* for resizing */
position: relative; /* to keep it in place */

对于 div.btn-basket 你必须添加：

position: absolute;

你必须在 div.btn-menu 上添加：

position: relative;

这将正确定位图像，使它们不会重叠、无缝移动并且不会进入下一行。