图像无拉伸或裁剪

Question

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

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

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

以下CSS将图像拉伸至150px×150px：

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

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

Answer 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>

Answer 2

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

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

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

如果你想确保每个都显示在150px大小为150px的方框中，你可以在容器div中包含每个图像，并强制它们完全相同：< / p>

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

使用以下CSS：

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

Answer 3

试试这种格式...

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