Question

我尝试使用不同的内容制作具有不同部分，标题，headercenter，headerleft等的响应式标题。

我设法将图像添加到标题中，但如果我缩小页面或在移动浏览器上查看它，它会缩小到图片的一个小点或完全消失。

这是我的HTML / CSS代码：www.jsfiddle.net/9118jw4s虽然预览不会有帮助，因为它只显示全尺寸图像。

有人可以帮助或链接我关于如何制作标题的教程，并且它的图像响应w / bootstrap，谢谢。

Answer 1

从我看到的＃header-container有填充设置，可能会在重新调整大小时缩小图像。试试这个。

 #header-container {
    margin:auto;
  }

或

 #header-container {
    padding-left:15%;
    padding-right:15%;
  }

我也看到你的拼写错误.headerleft =＆＃34; mind-width＆＃34;

大多数情况下，我会注意使用像素作为填充大小。尝试百分比。希望这有帮助！

Answer 2

bootstrap包含响应式图像的类＆＃34; .img-responsive＆＃34; ...

＆＃13;

.headerbox {
  height: 200px;
  width: 100%;
  background-color: white;
}

#header-container {
  padding-left: 140px;
  padding-right: 140px;
}

.headerdiv {
  height: 200px;
  width: 100%;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-left: 65px;
  padding-right: 65px;
}

.headerleft {
  height: 146px;
  min-width: 50%;
  width: 50%;
  float: left;
  padding-right: 15px;
  background-position: center left;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header">
  <div id="header-container" class="container">
    <div class="headerdiv">
      <a href="" class="headerleft">
        <img src="http://s7.postimg.org/ixxfw8n5n/header_logo.jpg" class="img-responsive" alt="header SUSU logo">
      </a>
    </div>

  </div>
</div>

＆＃13;

Answer 3

您可以尝试添加正文背景图片。

 body {
      background: url(background.jpg) no-repeat;
      width: 100%;
      height: 100%;
      background-size: contain;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover; 
       background-position: top;
       background-size: auto;           
    }

它会变得敏感。

Bootstrap响应头图像缩小/消失

3 个答案: