Css 当我想制作一个浮动高度的图像库时，Chrome中的最大高度（和纵横比）问题

几周前，我在现场工作。这是我的下一个投资组合网站。当我完成时，我想制作此结构：

• 标题
• 具有浮动高度的水平图像库
• 页脚

我想创建一些类似的东西，就像摄影师的投资组合网站一样。如果更改浏览器的窗口大小或按全屏按钮，img元素或图像的div将自动更改其高度

我在CSS中加入了一个“最大高度”参数，以防止图像永远不会超过其原始分辨率。在大分辨率屏幕上，这是一个严重的问题。但在Chrome中，它不能正常工作，因为纵横比变得错误。如果按全屏，纵横比会更差。在其他每一款最新浏览器（Firefox、Safari、Opera、IE8-9）中都能正常工作。我使用此命令仅为chrome创建了一个自定义CSS（但现在我在HTML中取消了此注释，以显示chrome纵横比问题）：

因此，通过这条线，使用Chrome中最大可能高度和纵横比的图像是正确的。但这对我来说是个问题。我不想让1024x683px的图像在全高清显示器上显示得比他的实际分辨率大

我认为最好的解决方案是，如果有javascript，它可以动态地描述每个图像的宽度和高度，并保持原始的纵横比。22slides.com使用类似的javascript，但我根本不是javascript程序员(

图像HTML结构：

<div id="portfolio">
    <img src="image1.jpg" alt="" />
    <img src="image2.jpg" alt="" />
</div>

我正在使用Jquery Javascript动态更改图像的高度，并以130px的负高度恢复屏幕上的图像溢出。可能不是这个脚本导致了问题，因为如果我关闭它，Chrome中的纵横比会更糟糕：

#portfolio { white-space: nowrap; float: left; }
#portfolio img { height: 100%; width: auto !important; min-height: 150px; max-height: 350px; }

// Dynamical vertical resizing on images and Correct the height (to not overflow the screen)
$(document).ready(function(){
    $(window).load(function(){ // On load
    $('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
    });
    $(window).resize(function(){ // On resize
    $('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
    });
});

我需要帮助！谢谢

更新：

“Emphram Stavanger”和“nick_w”编写的javascript似乎解决了我的图像适合浏览器高度的问题：

我试过了，它可以完美地处理单个图像。图像完美地适合可用的视口窗口，具有正确的纵横比！对于“Empram Stavanger”提出的问题，有一个直观的解释：

JSFIDLE demo（基本上这是Emphram Stavanger的代码，我刚刚输入了nick_W的更改，将Jquery更改为最新版本，并在显示链接后输入：

我还没有尝试过水平滚动图片网站，但这已经是一个很大的进步

更新2：

解决方案：

---

（我再次需要帮助…）

有点晚了，但您可以使用带有背景图像的div并设置背景大小：contain而不是img标记：

div.image{
    background-image: url("your/url/here");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

现在，您只需将div大小设置为所需的大小，图像不仅会保持其纵横比，而且还会在垂直和水平方向上集中

---

不过，background size属性仅为ie>=9。

有点晚了，但您可以将div与背景图像一起使用，并设置背景大小：contain而不是img标记：

div.image{
    background-image: url("your/url/here");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

现在，您只需将div大小设置为所需的大小，图像不仅会保持其纵横比，而且还会在垂直和水平方向上集中

---

“背景大小”属性仅为ie>=9。

你问这个问题已经有一段时间了。你找到解决方案了吗？是的，我找到了，但我需要另一方面的帮助：：）你问这个问题已经有一段时间了。你找到解决方案了吗？是的，我找到了，但我需要另一方面的帮助：）