响应全屏img不裁剪

我正在尝试作出响应全屏图像调整大小，以适应浏览器窗口没有任何裁剪发生。响应全屏img不裁剪

到目前为止，我的起点是在图像上设置max-width: 100%，以便填充页面的宽度。但是，如果窗口的高度发生变化，我需要它从max-width: 100%切换到max-height: 100%，这样图像就不会收获。

我认为要做到这一点的唯一方法是找出哪个方面更大，然后更改CSS以相应地使用max-width: 100%或max-height: 100%。

以下是目前的代码。它的工作原理是宽度，但不是用身高调整时：

$(document).on("ready", function() { 

    resizeImage($("#image"), $(window)); 

    $(window).on("resize", function() { 
     resizeImage($("#image"), $(window)); 
    }); 

}); 

function resizeImage(image, container) { 

    var widthRatio = Math.min(image.width()/container.width()), 
     heightRatio = Math.min(image.height()/container.height()); 

    if (heightRatio > widthRatio) { 
     image.css({ 
      "max-width" : "none", 
      "max-height" : "100%" 
     });  
    } 
    else { 
     image.css({ 
      "max-width" : "100%", 
      "max-height" : "none" 
     }); 
    } 
}

这里的标记：

<div class="imageContainer"> 
    <img src="ferrari5.jpg" id="image"> 
</div>

这里有一个CodePen例如：

http://cdpn.io/yAHeb

来源

2014-02-10 Chris Spittles

容器最大宽度：100％，最大高度：100％？如果没有，您只是将问题从图像转移到容器。一个http://jsfiddle.net/会有所帮助。 –

您的评论让我想到了答案！我认为这是一个JS问题，但我将img标记更改为块级元素，并将html和body标记设置为100％高度： http://codepen.io/chrissp26/pen/yAHeb If你发表你的评论作为答案我会接受它。 –

容器最大宽度：100％，最大高度：100％？如果没有，您只是将问题从图像转移到容器。 jsfiddle.net会有所帮助。

很高兴帮助:)

来源

2014-02-10 16:16:09

你有没有试着用CSS使用：

background-size: cover;

希望它有帮助！

来源

2014-02-10 15:59:48 QuarK

嗨，感谢您的回复。我没有使用背景图片，它是一个img标签。 –

响应全屏img不裁剪

回答

相关问题