Css 图像无拉伸或裁剪

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

我希望以恒定的宽度/高度显示图像，例如150px x 150px，而不拉伸图像以适应：

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

以下CSS将图像拉伸到150px乘以150px：

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>

$（文件）。准备好了吗(
函数（）{
$（'.container img'）。每个(
函数（）{
var theWidth=$（this.width（）；
var theHeight=$（this.height（）；
如果（宽度<高度）{
$（此）。高度（150）；
}
否则{
$（此）。宽度（150）；
}
});
});

试试这种格式

<img src="image.jpg" style="border:none;position:absolute; top:20px; left:50px; width:100px; height:200px;">

---

您应该能够使用

max width

和

max height

属性，如下所示：

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

这会将其约束到该框，而不会拉伸它

如果要确保每个图像都以

150px

的方式显示在大小为

150px

的方形框中，则可以将每个图像包含在容器div中，并强制它们恰好为该大小：

<div class="container">
  <img>
</div>

---

如果图像比方框小，是否希望图像增加到150px？+1，第一个1以正确回答…但请确保下次提交答案时，至少在回答后进行编辑，提供相关参考链接、代码，如果可以的话，还可以使用提琴作为演示：）提交答案很重要！有没有办法确保小于150px×150px的图像填充空间？我不认为完全使用CSS就可以填充空间，除非您知道方向并可以对其应用正确的类。你试过JS方法吗？这个解决方案在IE8中不起作用，还是我做错了什么？

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