响应式图像 CSS 之上的响应式图像答案

【问题标题】：Responsive image on top of responsive image CSS响应式图像 CSS 之上的响应式图像
【发布时间】：2013-08-24 20:32:19
【问题描述】：

我的网站上有一个徽标，我试图让它保持在中间并做出响应。我已经尝试了从“magin-left:auto;...”到“top:30...”的大量 CSS 代码，但徽标不会变小并停留在中间。我想知道是否有人可以帮助我。这是我的网站 -- http://www.mediadude.co.uk -- 徽标是中间的大媒体标志，尝试调整浏览器的大小，您会看到它不会停留在中间并变小。

感谢您的宝贵时间。
汉图

【问题讨论】：

标签： css image responsive-design

【解决方案1】：

您已将max-width 设置为图像，但未设置h1 标记。

h1#LogoMain {
    max-width: 100%;
}

你还有一个媒体查询给bodypadding: 20

@media (max-width: 767px) {
    body {
        padding-top: 0;
        padding-right: 20px;
        padding-left: 20px;
}

将上述值更改为0，以便在您的标题等上进行边缘到边缘的外观。

【讨论】：

感谢您的回复。我不得不添加更多媒体查询以使其保持在顶部，因为当我调整选项卡的大小时它会向下移动，但我认为这与图像的大小有关。应该在侧面放置一些额外的空间。无论如何，谢谢它真的帮助我走上正轨:)

【解决方案2】：

这会做你想做的事：http://jsfiddle.net/TJF8k/1/

<div class="header">
  <div class="floater"></div>
  <div class="imgwrap">
    <img class="image" src="//placehold.it/400x150">
  </div>
</div>

对于 CSS，您需要根据图像的尺寸调整 margin-bottom 上的负数 .floater。

.header {
  background-color: teal;
  height: 300px;
}

.floater {
  height: 50%;
  width: 100%;
  margin-bottom: -10%;
}

.imgwrap {
  width: 50%;
  margin: 0 auto;
  max-width: 400px;
}

.image {
  max-width: 100%;
  vertical-align: bottom;
}

【讨论】：