自举图形：100％宽度

在我的web应用程序中，我有一个网格中的div中包含的图形。自举图形：100％宽度

我希望图形是全宽和比例高度（要正确显示）。

我该怎么办？

Plunker是：http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview

HTML是：

<body> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-4 col-xs-offset-4" style="border: solid 2px red"> 
     <span class="glyphicon glyphicon-star"></span> 
     </div> 
    </div> 
    </div> 
    </body>

CSS是：

.glyphicon { 
    width: 100%; 
    color: green; 
    border: 3px solid green; 
}

问候。

来源

2015-07-10 user3181983

glyphicons就像字符...你应该尝试设置字体大小设置图标大小...但试着把它与100％的宽度将是有点棘手... – Julo0sS

只有“真正的方式”做这项工作，不使用媒体查询和字体大小将使用您的图形作为图像.../img-responsive ... – Julo0sS

你可以试验' font-size：25vw'改变数字，使字体与包含ele的视口宽度的比例相同换货。假设元素总是相同的比例。 – Starscream1984

要做到这一点..使图形明星图标响应。
你可以这样做。
用这个来做你想在这里实现的。
没有那么多可以填满的宽度，但大小，以你需要它做的。希望这有助于。

.star-size { 
    font-size: 8.5vw; 
    color:orangered; 
}

但请阅读this info。

responsive glyphicon

如果你也想在div块的高度是reponsive与星形图标，然后更改.inner-block类此...

.inner-block { 
    padding-top: 15px; 
    padding-bottom: 15px; 
    background-color:black; 
}

然后它会像这个。

enter image description here

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="../../favicon.ico"> 
 

 
    <title>HTML/CSS Block not appearing</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
<style> 
 
body { 
 
    padding-top: 50px; 
 
} 
 
.spacer { 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
}  
 
.block { 
 
    height: 240px; 
 
    padding-top: 15px; 
 
    background-color:orangered; 
 
} 
 
.inner-block { 
 
    height: 120px; 
 
    padding-top: 15px; 
 
    background-color:black; 
 
}  
 
    
 
.star-size { 
 
    font-size: 8.5vw; 
 
    color:orangered; 
 
}  
 
.center-div { 
 
    position: absolute; 
 
    left:0; 
 
    right:0; 
 
    margin:auto; 
 
     
 
}  
 
</style> 
 

 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top "> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand " href="#">Project name</a> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 

 

 
    
 
<div class="container col-lg-12 spacer"></div> 
 
     
 
    <div class="container block"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 text-center inner-block center-div" > 
 
     <span class="glyphicon glyphicon-star star-size"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    
 

 
    <!-- Bootstrap core JavaScript --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    
 

 
    
 
</body> 
 
</html>

来源

2015-07-11 00:46:40 AngularJR

图形文字实际上是一个特殊字体的字符，所以它们不会像这样缩放。如果你真的想要这样做，你应该创建一个图像，并以width: 100%为例。

另一种可能（但讨厌）解决方案是使用CSS转换，但它是一个黑客，不会自动调整，需要一些额外的黑客正确定位：

.glyphicon:before { 
    margin-left: 120px; 
    display:inline-block; 
    transform:scale(17,1); 
    -webkit-transform:scale(17,1); 
    -moz-transform:scale(17,1) 
    -ms-transform:scale(17,1); 
    -o-transform:scale(17,1); 
}

例子：http://plnkr.co/edit/Xk19bLqZKj7sDulZ6AiH?p=preview

来源

2015-07-10 12:52:43 DavidG

自举图形：100％宽度

回答

相关问题