1

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

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

我想创建类似的东西，就像22slides.com的摄影师作品集网站一样。如果您更改浏览器的窗口大小或按下全屏按钮，img 元素或图像的 div 会自动更改其高度。

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

#portfolio img { max-height: none; }

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

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

图像 HTML 结构：

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

CSS（最大高度是非常小的数字，只是为了向您展示 Chrome 中的问题）：

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

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

// 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 似乎解决了我的图像适合浏览器高度的问题： Imagefit vertical

我试过了，它可以完美地处理一张图片。图像完全适合可用视口窗口，具有正确的纵横比！“Emphram Stavanger”对我们的问题进行了直观的解释： http ://www.swfme.com/view/1064342

JsFiddle 演示（基本上是 Emphram Stavanger 的代码，我只是通过 nick_W 进行更改，将 Jquery 更改为最新，然后在显示链接之后放置：

http://jsfiddle.net/YVqAW/show/

我还没有尝试过水平滚动图像网站，但它已经迈出了一大步！

更新 2：

解决方案：https ://stackoverflow.com/questions/20303672/horizo​​ntal-image-slideshow-javascript-not-working-properly-with-portrait-oriente

（我再次需要帮助......）:)

4

1 回答 1

1

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

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

现在您可以将您的 div 大小设置为您想要的任何大小，并且图像不仅会保持其纵横比，而且还会垂直和水平集中。

background-size 属性只是 ie>=9 而已。

于 2013-05-30T14:03:30.253 回答