css - 响应式图像 CSS 之上的响应式图像

Question

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

谢谢你的时间。
汉图

Answer 1

您已设置max-width为图像但未设置为h1标签。

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

你也有一个媒体查询给body padding: 20

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

将上述值更改0为标题等的边缘到边缘外观。

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