图像无拉伸或裁剪

我的问题很简单。假设我有两个矩形图像。第一个宽 200 像素，高 100 像素，第二个宽 100 像素，高 200 像素。

我想以恒定的宽度/高度显示图像，例如150 像素 x 150 像素，无需拉伸图像以适应：

我不介意图像周围有空白/填充。问题是图像可以是任意宽度和高度，我想将它们限制在一个方框内而不拉伸它们。

以下 CSS 将图像拉伸至 150 像素 x 150 像素：

img {
    width: 150px;
    height: 150px;
}

最优选的解决方案是 CSS，即使我需要更多的标记。 JS/jQuery 也可以。

关于什么：

img {
    max-height:150px;
    max-width:150px
}

要解决关于使较小图像变大的第二个问题，您可以使用 jQuery。如果您事先知道照片方向并对这些图像应用不同的 css 类，那么 CSS 就可以工作...但是这会工作，然后您就不再需要 CSS 最大宽度的东西了。

<div class="container"><img src="images/DSC_0470.JPG" alt="Rad Image" /></div>

<script>
    $(document).ready(
        function () {
            $('.container img').each(
            function () {
                var theWidth = $(this).width();
                var theHeight = $(this).height();
                if (theWidth < theHeight) {
                    $(this).height(150);
                }
                else {
                    $(this).width(150);
                }

            });
        });</script>