自举响应IMG但改变图像的高度和宽度

Question

我的头PNG图片，我给它起class="responsive-img"但头看起来大..如何改变高度和宽度，但保持小吗？

Answer 1

Bootstrap 4

引导4已经介绍了几个new classes regarding images。

响应图像是现在.img-fluid

在引导图像由响应以.img流体。最大宽度：100％;和高度：自动;使得其与所述父元素扩展被施加到图像。

例：

<img src="..." class="img-fluid" alt="Responsive image">

是什么img-fluid办？

.img-fluid {
  max-width: 100%;
  height: auto;
}

作为缩略图图像.img-thumbnail

img-fluid example:

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
}

div {
  width: 100%;
  background-color: lightgreen;
  margin-bottom: 10vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<!-- img-fluid -->

<div>
  <svg class="bd-placeholder-img img-fluid" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 200x200"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"></rect><text fill="#dee2e6" dy=".3em" x="50%" y="50%">img-fuid</text></svg>
</div>

img-thumbnail example

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
}

div {
  width: 100%;
  background-color: lightgreen;
  margin-bottom: 10vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<!-- img-thumbnail -->
<div>
  <svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 200x200"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"></rect><text fill="#dee2e6" dy=".3em" x="50%" y="50%">200x200</text></svg>
</div>

---

Pre-bootstrap 4

首先它class="img-responsive"而不是class="responsive-img"

那类本身不会让你远，因为它不仅会：

.img-responsive{
  display: block;
  max-width: 100%;
  height: auto;
}

我建议你覆盖类，并添加你想要什么细节。如果你只是想改变高度和宽度（并保持它的响应和更小的），这里是一个基本的例子：

.img-responsive {
  max-width: 90%; /* or to whatever you want here */
  max-height: auto; /* or to whatever you want here */
}

触摸高度将变形的响应图像（除非这是你想要的），所以我建议你用最大宽度玩。尝试添加最小宽度为好。

Media Queries

您还可以使用@media，如果你已经知道你的形象应该是怎样看待特定的窗口大小：

    /* start of desktop styles */

@media screen and (max-width: 991px) {
     /* start of large tablet styles */
     .img-responsive {
       min-width: 70%;
     }
}

@media screen and (max-width: 767px) {
     /* start of medium tablet styles */
     /* Adding a fixed/percentage min-width could ensure that the image doesn't get too small */
     .img-responsive {
       min-width: 30%;
     }
}

@media screen and (max-width: 479px) {
     /* start of phone styles */
     /* It's possible to hide the image if the screen becomes too small */
     .img-responsive {
       min-width: 10%;
     }
}

More info regarding screen sizes here

More info regarding media types here