html - 更改窗口大小时,CSS 将图像调整为小于容器

标签 html css twitter-bootstrap

我正在尝试在我的页面上添加一些小的 .png,并在更改窗口大小时让它们随其余组件一起调整大小。

我正在使用 Bootstrap 4 并为较大的元素应用 img-fluid,效果很好。

有没有办法对缩小窗口时根本不调整大小的小图像应用完全相同的行为?

编辑:另外,如果有任何不同,我使用的是 Angular 2 的框架。 在下面的代码中,第一张图片随窗口缩小,而第二张没有。我试图为两者实现相同的行为。

<div class="container">
  <img src="https://grisha.org/images/sasha_five.png" class="img-fluid rounded mx-auto d-block" alt="">
  <img src="https://cdn0.iconfinder.com/data/icons/the-middle-ages/500/Knight_Military-128.png" alt="">
</div>

最佳答案

由于您使用的是小型 .png,您可以使用 img-thumbnail 类并且需要删除 img-responsive 类

关于html - 更改窗口大小时,CSS 将图像调整为小于容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41802821/

相关文章:

html - 规范标签和 UTF8

javascript - Bootstrap : Vertical toolbar to house btn-group-vertical groups

html - 更改 bootstrap 间距宽度

html - Font Awesome 在浏览器中不起作用,但在 codepen 中有效

html - 谷歌地图 100% 高度不工作

css - 行被相邻的内容拉长

javascript - 字符串插值Vue js

html - 如何建立指向本地可执行文件的超链接?

html - 如何使用 CSS 正确对齐 "AddThis"社交按钮

javascript - 为什么 Google 跟踪代码管理器不能安装在正文下的另一个 HTML 元素中?