图像无拉伸或裁剪

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>