bootstrap响应img但改变图像的高度和宽度

Question

我的标题是.png图像,我给了它class="responsive-img"但标题看起来很大..如何更改高度和宽度但保持较小？

Answer 1

Bootstrap 4

Bootstrap 4引入了一些关于图像的新类.

现在是响应式图像 .img-fluid

Bootstrap中的图像通过.img-fluid进行响应.最大宽度:100%; 和身高:汽车; 应用于图像,以便它与父元素一起缩放.

例:

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

怎么img-fluid办？

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

用作缩略图的图像是 .img-thumbnail

img-fluid示例:

.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示例

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

预引导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如果您已经知道图像应该如何查看特定窗口大小,您也可以使用:

    /* 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%;
     }
}

有关屏幕尺寸的更多信息

有关此类媒体类型的更多信息