我希望我的图像能够在bootstrap中响应

Question

有人告诉我，你可以通过内置的css在bootstrap中获得响应式图像。请帮助我。现在我使用这个自定义css

page-header .logo img {
   position: absolute;
   top: 240%;
   left: 126%;
   width: 200px;
   height: 150px;
   padding:1px;
   border:1px solid #021a40;
   background-color:#000;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

Answer 1

使用类img-responsive。 有关详细信息，请转至bootstrap 例如： <img src="..." class="img-responsive" alt="responsive image">

Answer 2

如果您使用的是Bootstrap，它会附带一个用于处理名为img-responsive的响应式图像的类。只需将其添加到<img>，它应该按预期工作：

<img src="..." class="img-responsive" alt="Now I am responsive">

应该注意的是，取决于<img>的定位方式（例如绝对，相对，固定等）和大小会影响它的响应程度。通过将其单独添加到当前课程中，它实际上并不值得注意，但是如果您按照以下方式更改课程：

page-header .logo img {
   position: absolute;
   padding:1px;
   border:1px solid #021a40;
   background-color:#000;
}

并使用以下标记：

<page-header>
    <div class='logo'>
        <img src='http://www.trythisforexample.com/images/example_logo.png' class='img-responsive' />
    </div>
</page-header>

它应该按预期的那样工作seen in this example：