如何使用引導程序和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製作響應式圖像

回答

相關問題