7

容器 div 中的图像，存在高度问题

所以我有一个画廊，我的大多数图片目前都是 100% 由 CSS 控制的。但是，在设置 min-height: 100%; 在我的图像上，我造成一些拉伸。我没有太多有问题的照片，但我无法控制用户上传的内容。

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

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

更新 - - - - -

我找到了一个目前似乎可以正常工作的解决方案，它可能不是最好的尝试，但我找到了另一个帮助我的答案： 如何按比例调整图像大小/保持纵横比？

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

**Update Final ********* 在玩完之后，我从 thumb 脚本中截取了一小段，只是它在容器中绝对定位图像的部分。

$(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/我已经开始编写自己的代码来做到这一点，但我会研究它的工作情况并根据需要进行调整。

4

4 回答 4

5

我找到了一个目前似乎可以正常工作的解决方案，它可能不是最好的尝试，但我找到了另一个帮助我的答案： 如何按比例调整图像大小/保持纵横比？

用我的发现更新了问题

$(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 );
   });
});
于 2013-03-12T12:27:38.430 回答
3

好吧，如果不需要保持整个图片可见（例如画廊中的缩略图），您可以仅使用 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', '');
     });

});
于 2013-03-11T14:00:40.573 回答
1

你在说谁的长宽比？您的画廊的纵横比或图像的纵横比？您无法通过仅更改一个维度（此处为高度）来保持图像的正确纵横比。为了保持纵横比，您必须同时更改图像的高度和宽度。任何方式，如果你想试试这个：

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%。它会成功的。

于 2013-03-11T14:01:39.547 回答
0

所以，我意识到这个问题前一阵子问了。但从那以后，我找到了一种甜美的 CSS 唯一方法来流畅地保持元素的纵横比。试试看：

#targetElement {
    max-width: 100%;
}

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

是的，所以我现在一直都在使用这个技巧，而且它肯定比使用 javascript，甚至效率更低的 JQuery 更高效，更简洁。希望这可以帮助某个地方的人！如果你是一个 LESS 人，我在 Github 上有一个 mixin Gist 可以做到这一点——这就是我使用它的频率！它住在这里：甜蜜的 AR 技巧。

于 2014-05-02T21:22:16.467 回答