Question

我是CSS，bootstrap的新手。我正在尝试添加响应式图像，需要更改引导类（行和列）的位置和大小

a，图像响应正在运行当没有样式更改时（请检查下面的代码）

<h1>

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">
           <div class="col-md-1" >
                <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
           </div>
      <div>
 <div>
</body>

提前致谢

Answer 1

我得到了解决方案，而不是使用“px”我有使用“％”。请检查代码。 （顶部，左侧，高度，宽度更改为％）

<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>

如何使用bootstrap和css制作响应式图像

1 个答案: