twitter-bootstrap 引导响应 img 但更改图像高度和宽度

bootstrap responsive img but change image height and width

提问by Ahmed Albusaidi

my header is .png image and I gave it the class="responsive-img"but the header looks big .. how to change the height and width but keep it smaller?

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

回答by kemicofa ghost

Bootstrap 4

引导程序 4

Bootstrap 4 has introduced a few new classes regarding images.

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

Responsive images are now .img-fluid

响应式图像现在 .img-fluid

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

Bootstrap 中的图像使用 .img-fluid 进行响应。最大宽度：100%；和高度：自动；应用于图像，使其与父元素一起缩放。

example:

例子：

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

What does img-fluiddo?

有什么作用img-fluid？

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

Images used as thumbnails are .img-thumbnail

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

img-fluid example:

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 example

img-缩略图示例

.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

预引导 4

First off it's class="img-responsive"and not class="responsive-img"

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

That class itself won't get you far since it only does this:

该课程本身不会让您走得太远，因为它只执行以下操作：

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

I recommend you overwrite the class and add the specifics of what you want. If you only want to change the height and width (and keep it responsive and smaller), here is a basic example:

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

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

Touching the height will deform your responsive image (unless that is what you want), so I recommend you play with the max-width. Try adding a min-width as well.

触摸高度会使您的响应式图像变形（除非这是您想要的），因此我建议您使用 max-width。尝试添加一个最小宽度。

Media Queries

媒体查询

You can also use @media, if you already know how your image is supposed to look at specific window sizes:

您也可以使用@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

关于媒体类型的更多信息在这里