Question

Image in a container div, with the height issue

所以我有一个画廊，其中我的大多数图像目前由CSS控制100％。但是，在设置最小高度：100％;在我的图像上，我会让一些人伸展。我没有太多有问题的照片，但我无法控制用户上传的内容。

无论如何使用jQuery我可以获得图像高度并检查它是否符合要求，如果没有，以某种方式增加图像宽度以满足高度要求但保持所有比例？因此，我因此避免造成任何扭曲，但通过使div没有间隙来保持画廊整洁。

注意：提供的图片是我删除min-height: 100%;时发生的情况，以便您可以查看我的问题。

更新 - - - - -

我找到了一个似乎暂时无法正常工作的解决方案，这可能不是最好的尝试，但我找到了另一个帮助我的答案： How to resize images proportionally / keeping the aspect ratio?

我只是稍微调整了代码，现在如果图像不符合minHeight要求，它会按比例调整图像大小，直到达到minHeight为止。在测试中似乎对我来说很好。

**更新最终版本********* 在玩完之后，我从拇指脚本中取出了一个小小的snippit，只是它将图像绝对定位在容器内的部分。

$(window).load(function() {

    $('.thumbnail img').each(function() {
        var maxWidth = 320; // Max width for the image
        var minHeight = 270;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height < minHeight){
            ratio = minHeight / height; // get ratio for scaling image
            $(this).css("height", minHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
        }

        var $img = $(this),
        css = {
            position: 'absolute',
            marginLeft: '-' + ( parseInt( $img.css('width') ) / 2 ) + 'px',
            left: '50%',
            top: '50%',
            marginTop: '-' + ( parseInt( $img.css('height') ) / 2 ) + 'px'
        };

        $img.css( css );
   });

}）;

这会遍历我的所有缩略图，相应地调整它们的大小。因此，如果不满足最小高度，图像将按比例放大，直到高度适合我的缩略图容器。然后底部将采取每个图像，绝对定位它，并采取宽度和高度并除以2，以计算在边缘上减去多少以使图像居中。我还在调整它，但目前似乎对我有用。我希望这有助于其他人。

另外

任何有类似问题的人都发现了这个问题：http://joanpiedra.com/jquery/thumbs/我已经开始编写自己的内容来完成这项工作，但是我会根据需要调查它的工作原理并进行调整。

Answer 1

我找到了一个似乎暂时无法正常工作的解决方案，这可能不是最好的尝试，但我找到了另一个帮助我的答案： How to resize images proportionally / keeping the aspect ratio?

根据我的发现更新了问题

$(window).load(function() {
    $('.image-gallery-item-image-link img').each(function() {
        var maxWidth = 320; // Max width for the image
        var minHeight = 270;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height < minHeight){
            ratio = minHeight / height; // get ratio for scaling image
            $(this).css("height", minHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
        }

        var $img = $(this),
        css = {
            position: 'absolute',
            marginLeft: '-' + ( parseInt( $img.css('width') ) / 2 ) + 'px',
            left: '50%',
            top: '50%',
            marginTop: '-' + ( parseInt( $img.css('height') ) / 2 ) + 'px'
        };

        $img.css( css );
   });
});

Answer 2

好吧，如果不需要保持整个图片可见（例如图库中的缩略图），您只能使用css完成此操作。看来你有风景类型的照片。 HTML

<div class="img-container">
<img src="path/to/img.png" alt="">
</div>

的CSS：

div > img {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;

}

jquery:
$(document).ready(function(){
     $(".imgcontainer > img").each(function(){
       var thisimg = "url("+$(this).attr('src')+")";
       $(this).css({'background-image': thisimg });
       $(this).attr('src', '');
     });

});

Answer 3

你在谈论谁的宽高比？您的图库的宽高比或图片的宽高比？通过仅更改一个尺寸（此处为高度），无法使图像保持正确的宽高比。为了保持纵横比，您必须更改图像的高度和宽度。如果你想试试这个：

var img = document.getElementById('imageid'); 
var width = img.clientWidth;
var height = img.clientHeight;
if(width >height)
    $(img).attr('style',"width=100%");
else
    $(img).attr('style',"height=100%");

我想要做的是，将最大尺寸的css设置为100％。它会做到这一点。

Answer 4

所以，我刚才意识到这个问题。但是我已经发现了一种甜蜜的css方法来保持元素的纵横比，流畅。试试吧：

#targetElement {
    max-width: 100%;
}

#targetElement:after {
    content: '';
    width: 100%;
    padding-bottom: <aspect-ratio>%; // where (height / width)*100 = <aspect-ratio>
}

是的，所以我现在一直使用这个技巧，它肯定比使用javascript，甚至更低效的JQuery更高效，更简洁。希望这可以帮助某个人！如果你是一个很少的人，我在Github上有一个mixin Gist就是这样 - 这就是我经常使用它的频率！它住在这里：Sweet AR trick。

jQuery更改图像高度保持纵横比

4 个答案: