Question

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

谢谢你的时间。
Hantoo

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

响应式图像CSS上的响应图像

2 个答案: