如何使用引导程序和css制作响应式图像

-1

我是CSS，bootstrap的新手。我试图添加响应形象，需要改变的位置，自举类（行和列）的大小如何使用引导程序和css制作响应式图像

一，图像响应工作当有风格没有变化（查收代码以下）

<head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
<body> 
<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-1" > 
       <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/> 
      </div> 
     <div> 
<div> 
</body>

b，图像响应是不工作当我们添加额外的样式（查收下面的代码）

<head> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="container-fluid"> 
    <div class="row" style="position: absolute; top:10px; left:30px; border: 3px solid yellow; width:500px; height:300px"> 

      <div class="col-md-1" style="border: 1px solid red; width:228px; height:50px;"> 
       <img style="&quot;&quot;" class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"> 
      </div> 
    </div> 
</div> 

</body>

在此先感谢

来源

2015-09-06 afsal.akbarsha

它的正常工作有什么事 –

http://jsfiddle.net/3rfj64yd/耶似乎是工作的罚款 – Goodsoup

我们必须知道什么正是你需要的。例如，如果您为div元素提供像“width：228px”这样的样式，则图像内部的宽度不会超过228像素。 img-responsive类只不过是{display：block;最大宽度：100％;高度：自动; }有关Bootstrap网格和img-responsive的更多信息，请访问http://getbootstrap.com/css/#grid – Trebor

我不是使用 “PX” 的解决，我有使用 “％” .Kindly检查代码。 （上，左，高度，宽度改为％）

<html> 
<head> 
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> 
</head> 
<body> 
    <div class="container-fluid"> 
     <div class="row" style="position: absolute; top:2%; left:3%; border: 3px solid yellow; width:17.5%; height:12%"> 
     <div class="col-md-1" style="border: 1px solid red; width:100%;height:100%;"> 
      <img src="https://www.google.co.uk/images/srpr/logo11w.png" class="img-responsive" style="&quot;&quot;">  
     </div> 
     </div> 
    </div> 
    </body> 
</html>

来源

2015-09-07 07:01:45

如何使用引导程序和css制作响应式图像

回答

相关问题