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

Question

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

所以我有一张图片，并没有那么大。

所以我想要的是：

1. 如果容器的尺寸（宽度）较大，则将图像显示为原始尺寸
2. 如果容器的宽度变小，就像用户缩小浏览器一样，那么也会自动缩小图像。

第1点的原因是，由于图像的大小可能通常小于容器（取决于用户调整浏览器的方式），我不希望图像（jpg）到被拉伸到更大，这将使图像模糊。

然后我使用了以下css：

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

效果不是我想要的：

1. 如果img的容器更大，那很好：



1. 但如果我缩小容器（浏览器）：



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

我怎样才能真正实现我的目标？

Answer 1

将CSS设置为：

width:100%
max-width:500px;

这是在图像最初为500px宽的情况下。

这是一个小提琴：

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