【问题标题】：bootstrap responsive img but change image height and width引导响应 img 但更改图像高度和宽度
【发布时间】：2014-08-03 03:47:21
【问题描述】：

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

【问题讨论】：

【解决方案1】：

引导程序4 & 5

自 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

预引导 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 */
}

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

当您想要根据设备的一般类型（例如打印与屏幕）或特定特征和参数（例如屏幕分辨率或浏览器视口宽度）来修改您的网站或应用时，媒体查询非常有用。

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

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

【讨论】：