调整大小时，Bootstrap徽标不会缩小

时间：2015-12-14 20:06:13

标签： html css iphone twitter-bootstrap


我最近一直在为我的公司开发一个网页，并一直在提出问题来帮助自我发展，称为Empreus。

我正在使用bootstrap来帮助我设计页面。 但是，我现在遇到了一个问题。

我到目前为止的代码显示在代码段中。

＆＃13;
＆＃13; 
@font-face {
    font-family: 'montserratlight';
    src: url('montserrat-light-webfont.eot');
    src: url('montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('montserrat-light-webfont.woff2') format('woff2'),
         url('montserrat-light-webfont.woff') format('woff'),
         url('montserrat-light-webfont.ttf') format('truetype'),
         url('montserrat-light-webfont.svg#montserratlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'montserratsemi_bold';
    src: url('montserrat-semibold-webfont.eot');
    src: url('montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('montserrat-semibold-webfont.woff2') format('woff2'),
         url('montserrat-semibold-webfont.woff') format('woff'),
         url('montserrat-semibold-webfont.ttf') format('truetype'),
         url('montserrat-semibold-webfont.svg#montserratsemi_bold') format('svg');
    font-weight: normal;
    font-style: normal;

}

#header {
	padding:10px 0 0 0 ;
}

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
	
	.navbar-brand {
		display:none;
	}
}

.navbar {
	margin-bottom:0px;
	font-family:"montserratlight";
	text-transform: uppercase;
	border-top:2px solid #000;
	border-bottom: 2px solid #000;
	border-radius:0px;
}

img.logoEmpreus {
	margin-left: auto;
	margin-right: auto;
	display:block;
	margin-bottom:10px;
}

img.logoEmpreus:hover {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

#page {
	margin: 0px auto;
}

li {
	display:inline;
	margin:0 -1px;
}

li a {
  color: black;
  font-size:16px;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

li a:hover {
  color: blue;
  font-size:18px;
  text-decoration: none
}

li.active a {
  font-weight: bold;
  color: #333;
  text-decoration: none
}

ul {
	margin:0 auto;
	font-family:"montserratlight";
	text-transform: uppercase;
}

.active {
	font-family:'montserratsemi_bold';
}

.imageInside { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 {
	margin-top:0px;
	margin-bottom:0px;
}

h2 span { 
   color: white; 
   font: bold 0.8em 'montserratsemi_bold', Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px;
   position: absolute; 
   top: 50%; 
   transform: translateY(-50%);
} 

#base ul {
	margin:0 auto;
	border-top:2px solid #000;
	border-bottom: 2px solid #000;
	padding:10px;
	text-align: center;
	font-family:"montserratlight";
	text-transform: uppercase;
}
＆＃13; 
<!DOCTYPE html>
	<head>
		<title>Problems | Stack Overflow</title>
		<!-- Tab Title -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		
	</head>
	<body>
		
		<div id = "header">
			<!-- Empreus logo Image. Animated. Width 300px. -->
			<img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" width="300" />
		</div>
		
		<div class="container">
			
			<nav class="navbar navbar-default" role="navigation">
			        <!-- Brand and toggle get grouped for better mobile display -->
			        <div class="navbar-header">
					<a class="navbar-brand" href="#">Stack Overflow</a>
			          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
			            <span class="sr-only">Toggle navigation</span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			          </button>
			        </div>

			        <!-- Collect the nav links, forms, and other content for toggling -->
			        <div class="collapse navbar-collapse navbar-ex1-collapse">
			          <ul class="nav navbar-nav">
			            <li><a href="#">Option 1</a></li>
			          <li><a href="#">Option 2</a></li>
			            <li><a href="#">Option 3</a></li>
						<li><a href="#">Option 4</a></li>
						<li><a href="#" class="active"><b>The Problem</b></a></li>
			          </ul>
			        </div><!-- /.navbar-collapse -->
			      </nav>

			<div class = "row">
			<!-- Declaration of First Row -->
				<div class="imageHolder col-md-12" style="margin-top:10px;"> 
				<!-- Image Container as DIV -->
					<div class = "imageInside hvr-underline-from-center" >
						<h2><span>Logo Issue.</span></h2>
						<img id = "imageHomeJPG" src="http://bit.ly/1P2Ylo3" style="width:100%" />
					</div>
					<!-- Image Link -->
    			</div>	
			</div>	
			
			
			<div class="row">
			
			<div id = "base" class="col-md-12" style="margin-bottom:10px">
					<p>
						<ul class="col-md-12"> 
							<!-- MAIN NENU BAR -->
							<li><a href="#">Copyright Whatever</a></li>
						</ul>
						<!-- Unordered lists.-->
					</p>
			</div>
			<!-- Navigation HTML Markup -->
			
			</div>
			
		</div>
	</body>
	</html>
＆＃13;
＆＃13;
＆＃13;

现在，这是问题所在。 在iPhone 6设备上查看的网页显示如此。 iPhone 6 & 6 plus

然而，在iPhone 4 / iPhone 5上，徽标移出容器（见下文） iPhone 4 & 5

我希望徽标在容器宽度范围内，就像iPhone 6＆amp; 6加上例子。我在想是否可以添加一些代码来使徽标变得灵活但我到目前为止尝试使用min-width而不费力。

有人可以帮忙吗？ 我已将代码插入为代码段。请全屏查看。 我使用了铬检查元件＆amp;调整大小到模拟屏幕功能以获取这些屏幕截图。

感谢。

1 个答案:

答案 0 :(得分：4)

硬编码到图像标签中的宽度可能会使您绊倒;它会覆盖样式表中的任何CSS。您可以将width组合使用百分比，并将max-width设置为图片的实际宽度：

<img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" />

img.logoEmpreus {
    margin-left: auto;
    margin-right: auto;
    display:block;
    margin-bottom:10px;
    width: 80%;
    max-width: 300px;
}

下面的代码段（为了简洁起见，我删除了一些不需要复制问题的HTML / CSS）：

＆＃13;
＆＃13; 
#header {
  padding: 10px 0 0 0;
}
@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  .navbar .navbar-collapse {
    text-align: center;
  }
  .navbar-brand {
    display: none;
  }
}
.navbar {
  margin-bottom: 0px;
  font-family: "montserratlight";
  text-transform: uppercase;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  border-radius: 0px;
}
img.logoEmpreus {
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-bottom: 10px;
  width: 80%;
  max-width: 300px;
}
img.logoEmpreus:hover {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
#page {
  margin: 0px auto;
}
li {
  display: inline;
  margin: 0 -1px;
}
li a {
  color: black;
  font-size: 16px;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
li a:hover {
  color: blue;
  font-size: 18px;
  text-decoration: none
}
li.active a {
  font-weight: bold;
  color: #333;
  text-decoration: none
}
ul {
  margin: 0 auto;
  font-family: "montserratlight";
  text-transform: uppercase;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="header">
  <!-- Empreus logo Image. Animated. Width 300px. -->
  <img class="logoEmpreus animated" src="http://bit.ly/1P2ZlbH" alt="Empreus" />
</div>

<div class="container">

  <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Stack Overflow</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Option 1</a>
        </li>
        <li><a href="#">Option 2</a>
        </li>
        <li><a href="#">Option 3</a>
        </li>
        <li><a href="#">Option 4</a>
        </li>
        <li><a href="#" class="active"><b>The Problem</b></a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </nav>



</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题