Css 屏幕大小改变时立即缩放图像

我需要在屏幕/浏览器大小改变时立即缩放图像，保持比例和位置

---

我知道宽度：100%，最大宽度；高度：自动-等等-但没有一个是我想要的-它真的必须精确到我的行：立即开始缩放图像，当浏览器窗口最小化到99%

以下是代码：

<div class="foo">
  <img src="http://i.imgur.com/RYjIHr9.png">
</div>

<style>
@media (min-width: 100px) and (max-width: 768px) {
  .foo img {width: 100px;}
}
</style>

@介质（最小宽度：100px）和（最大宽度：768px）{
.foo img{宽度：100px；}
}

实例：

---

-尝试调整浏览器窗口的大小

您的代码是什么？我认为使用bootstrap将帮助您实现img响应类。这将使您的图像响应窗口大小。请参阅

Cloudinary为图像提供了良好的响应支持。

---

请参阅：

在html中没有太多的编码，这一切都发生在我的css-我的网站上，我正在努力实现这一点：这是我经常做的事情，但在真正必要之前它不会调整任何大小。对我来说，从任何人调整浏览器大小的那一刻起，这都是必要的——thnx看起来真的很不错，但它不是“只是”缩放，就像你可以轻松地完成上面提到的那样吗？即使图像比浏览器窗口小，我也希望它在开始最小化（例如缩放）时立即缩放。我不确定我是否理解缺少了什么。看看这个例子：特别是在这里，如果你缩小图像的大小，如果你在某个点上放大，Cloudinary将获取更大的图像以保持质量。