image - Bootstrap 响应 img 但更改图像高度和宽度

Question

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

Answer 1

Bootstrap 4 & 5
自 Bootstrap 4 以来，引入了一些关于图像的新类。
响应式图像现在是 .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 scaleswith the parent element.

示例:

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

img-fluid 是什么意思做？

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

用作缩略图的图像是 .img-thumbnail
预 Bootstrap 4
首先是 class="img-responsive"而不是 class="responsive-img"该类(class)本身不会让您走得太远，因为它只会这样做:

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

我建议您覆盖类(class)并添加您想要的细节。如果您只想更改高度和宽度(并使其保持响应和更小)，这是一个基本示例:

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

触摸高度会使您的响应图像变形(除非这是您想要的)，所以我建议您使用最大宽度。尝试添加最小宽度。
Media Queries

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

这基本上允许您在各种设备上调整您的图像，但是可能有 an overwhelming amount并选择一般情况下可能是首选。

/* target devices with small screens usually mobile devices */
@media screen and (max-width: 479px) {
  image {
    margin: 0;
  }
}