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

时间:2013-08-24 20:32:20

标签: css image responsive-design

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

谢谢你的时间。
Hantoo

2 个答案:

答案 0 :(得分:0)

您已将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,以便在标题等边缘上查看。

答案 1 :(得分:0)

这将做你想做的事: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;
}