Css 比例和中心对齐<；img>；在隐藏的溢出div标记中

我正在为自己创建一个新网站，作为一名摄影师/摄像师，图像内容是我希望人们在我的页面上看到的第一件事

这是到目前为止我的代码

HTML:

我想用这个来实现的，是这里所做的：

如您所见，无论窗口宽度如何，图像都保持居中。它还可以根据放大或缩小的程度进行上/下缩放。这个站点是用Squarespace创建的，所以我想象它是某种形式的花式javascript/jquery或类似的东西

---

使用CSS，我可以使图像保持居中，或向上和向下缩放，但不能同时两者。这就是我在这里努力实现的目标。有没有办法将两者结合起来，这样就可以做到这一点？

尝试使用CSS

背景尺寸：封面。封面收缩和扩展以适应各种窗口大小，而不会扭曲图像。如果屏幕大小比率与图像不同，则它将根据定位方式（顶部、底部、中心、右侧、左侧、中心）裁剪边缘。保持图像的比例是背景大小的关键特性：cover；。因为它是背景而不是图像，所以您可以轻松地将元素放置在它上面

这是一个你可以玩的游戏。展开并收缩窗口以查看调整大小的背景图像。下面列出了您感兴趣的唯一代码。（示例中的其他CSS仅用于样式设置，并使div以100%的宽度和高度显示）


跟进
是的，有CSS3幻灯片库。这里有一个看起来很吸引人，而且反应灵敏的：。下面是一个关于从Smashing杂志创建CSS3幻灯片的教程：

您可能已经知道下面的信息，但在投入大量时间使用该技术（CSS3或JavaScript）之前，您需要检查的是gallery在较旧的浏览器和手持设备上的显示方式，以及这些设备是否有简单的解决方法

一种技术是将多媒体资料放在一个单独的div中，对于较旧的浏览器/设备可以隐藏该div。然后使用背景大小：cover或其他技术作为备用方法。还要记住，触摸屏上的IE10和IE11可能会出现故障，也需要测试。在不超出原始问题范围的情况下，有几种检测设备/浏览器的好方法，包括Modernizer、Matt Stow的布局引擎、Categorizr.js和Internet Exlporer的条件评论

旁注：问题中列出的示例网站显示了一个大的单幅图像作为背景，如果有幻灯片，则使用最新版本的Firefox无法实现此目的。
那么是否可以使用CSS转换或类似方式将背景图像制作成“x”个图像的幻灯片？是，有CSS3幻灯片，答案底部列出了资源。
<div id="slideshow_background">
            <img src="IMAGEADDRESS.JPG" class="slideshow" align="middle"/>
            </div>

#slideshow_background {
    width: 100%;
    left: 50%;
    margin-left: -50%;
    overflow: hidden;
    text-align: centre;
    z-index: -1;
    position: absolute;
    margin-top: -100px;
    margin-left: -50%;
    max-height: 700px;
}


img.slideshow {
    width: 100%;
    min-width: 700px;
    display: block;
    text-align: center;
    vertical-align: bottom;
}    

background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;