屏幕尺寸更改后立即缩放图像

Question

我需要在屏幕/浏览器尺寸发生变化时立即缩放图像，保持比例和位置。

我知道宽度：100％，最大宽度;高度：自动 - 等等 - 但这些都不是我想要的 - 它必须与我的行完全一致：一旦开始缩放图像，当浏览器窗口最小化到99％时

Answer 1

以下是向您展示的代码：

<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>

实例：

https://jsfiddle.net/20t24pqh/2/ - 尝试调整浏览器窗口的大小

Answer 2

你的代码是什么？我认为使用bootstrap会帮助你有一个img-responsive类。这将使您的图像响应窗口大小。请参阅http://getbootstrap.com/

Answer 3

Cloudinary为图像提供了很好的响应支持 请参阅：http://cloudinary.com/blog/how_to_automatically_create_images_for_responsive_design