CSS根据目标的尺寸而不是容器的尺寸来调整大小？

Question

我有许多图像尺寸相同，但尺寸各不相同。我希望能够使用CSS将所有这些图像缩放到X％，基于他们的尺寸，而不是容器的尺寸。

鉴于这个简单（有些愚蠢）的例子：

<div style="width: 500px;">
    <img src="none.png" style="width: 50%;" />
    <!-- none.png dimensions: 200px by 1000px (L x W)-->

    <img src="none2.png" style="width: 50%;" />
    <!-- none2.png dimensions: 500px by 800px (L x W)-->
</div>

none.png的宽度设置为250px，我的目标是500px，none2.png的宽度设置为250px，目标是400px。

所以......我在这里错过了什么？如何根据目标而不是容器来调整CSS大小？

这可以通过JavaScript $('img').css('width', $(this).width * 0.2)来完成......但它可以在CSS本地完成吗？

Answer 1

img
   {
    min-width:50%;
    height:auto;
   }