图像无拉伸或裁剪答案

【问题标题】：Image No Stretch or crop图像无拉伸或裁剪
【发布时间】：2012-10-31 06:51:13
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

如果图片比盒子小，你想让图片增加到150px吗？

标签： css image stretch

【解决方案1】：

怎么样：

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>

【讨论】：

+1，第一个回答正确...但请确保下次您提出答案时，至少在您回答后进行编辑，提供相关参考链接、代码，如果可以的话，也比小提琴作为演示:)
展示你的答案很重要！
有没有办法保证小于 150px x 150px 的图片填满空间？
除非您知道方向并且可以对其应用正确的类，否则我认为 CSS 并不那么纯粹。你试过 JS 方法吗？

【解决方案2】：

您应该能够使用max-width 和max-height 属性，如下所示：

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

这应该将它限制在那个盒子上而不是拉伸它。

如果您想确保每个图像都出现在大小为150px by 150px 的方形框中，您可以将每个图像包含在一个容器 div 中，并强制它们为该大小：

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

使用以下 CSS：

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

【讨论】：

这个解决方案在 IE8 中不起作用，还是我做错了什么？

【解决方案3】：

试试这个格式...

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

【讨论】：