检查我在这里谈论的页面:http://willy-ward.com/fashion
基本上，我不知道如何在用户调整浏览器大小时然后将其最大化时让图片保持当前的纵横比。
我一直在研究 CSS，但我似乎永远做不好。我敢肯定这是相当容易的事情。只需查看该 URL 并查看照片如何受到调整浏览器窗口大小的影响。高度 100% 和宽度自动似乎无法正常工作？
侧面的另一个问题是此页面上图片下方的额外空白，尽管它们下方没有任何元素。我在那里有点困惑。
抱歉，如果问题没有 Eloquent 地提出，我的英语会随着我越来越累而下降。
感谢您的帮助!
这是我目前拥有的代码:
jQuery(document).ready(function() {
jQuery(".photoStrip").width(0);
jQuery(".photoContainer img").load(function(){
jQuery(this).css({'visibility':'hidden','display':'block'});
var newWidth = jQuery(this).width();
jQuery(this).css({'visibility':'visible','display':'none'});
jQuery(".photoStrip").width(function(index, width){
return width + newWidth + 20;
});
jQuery(this).parent().css({
'width' : newWidth
});
jQuery(this).fadeIn(800);
}).each(function(){
if(this.complete) jQuery(this).trigger("load");
});
jQuery(window).bind("resize", function(){
jQuery(".photoStrip").width(0);
jQuery(".photoContainer").each(function(){
var newWidth = jQuery("img", this).width();
jQuery(this).css({
'width' : newWidth
});
jQuery(".photoStrip").width(function(index, width){
return width + newWidth + 20;
});
});
});
});
最佳答案
我用我认为可以解决您的问题的方法制作了一个快速的 jsfiddle。 我希望它有所帮助。 http://jsfiddle.net/QfHF6/
<html>
<head>
<title>Image</title>
<script type="text/javascript">
function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_width = document.images[0].width
var image_height = document.images[0].height
var height_ratio = image_height / window_height
var width_ratio = image_width / window_width
if (height_ratio > width_ratio)
{
document.images[0].style.width = "auto"
document.images[0].style.height = "100%"
}
else
{
document.images[0].style.width = "100%"
document.images[0].style.height = "auto"
}
}
</script>
<body onresize="resizeImage()">
<center><img onload="resizeImage()" margin="0" border="0" src="http://upload.wikimedia.org/wikipedia/en/2/2b/1_WTC_rendering.jpg"></center>
</body>
</head>
</html>
关于html - 在调整大小时将照片调整到浏览器高度并在不拉伸(stretch)的情况下最大化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11896864/