html - 如何使图像在显示尺寸方面完全灵活？

Question

如果我的问题太新手，请原谅我。

所以我有一个图像，它并没有那么大。

所以我想要的是:

1. 如果其容器的尺寸(宽度)较大，则按原始尺寸显示图像
2. 如果其容器的宽度变小，例如用户缩小浏览器，则图像也会自动变小。

第 1 点的原因是，由于图像的大小通常可能小于容器(取决于用户如何调整浏览器)，我不希望图像 (jpg) 被拉伸(stretch)到更大，并且会使图像模糊。

然后我使用了以下 css:

{
  width: auto;
  display: flex;
  margin-left: auto;
  margin-right: auto
}

效果不是我想要的:

1. 如果img的容器大点就好了:

1. 但如果我缩小容器范围(浏览器):

您可以看到图像的大小保持不变，但部分被隐藏或覆盖。

我怎样才能真正实现我想要的？

Answer 1

将 CSS 设置为:

width:100%
max-width:500px;

这是为了防止图像最初是 500 像素宽。

这是一个 fiddle :

http://jsfiddle.net/Preben/eff76s2u/