Question

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

到目前为止，这是我的代码。

HTML：

<div id="slideshow_background">
            <img src="IMAGEADDRESS.JPG" class="slideshow" align="middle"/>
            </div>

CSS：

#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;
}

我想用此实现的目标是：http://www.atcofficial.com。

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

使用CSS，我可以让图像保持居中， OR 可以向上和向下缩放，但不能同时保持两者。这就是我想在这里实现的目标。是否可以将两者结合起来以便这可能？

Answer 1

尝试使用CSS background-size:cover;。盖子收缩和扩展以适应各种窗口尺寸，而不会扭曲图像。如果屏幕尺寸比率与图像不同，则会根据您的位置（顶部，底部，中间，右侧，左侧，中央）裁剪边缘。保持图像比例是背景大小的关键特征：覆盖;因为它是背景而不是图像，所以您可以轻松地将元素放在其上面。

这是你可以玩的JSFiddle Example。展开和收缩窗口以查看背景图像的大小调整。您感兴趣的唯一代码如下所示。（示例中的其余CSS仅用于样式设置，并使div显示为100％宽度和高度）。

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;

跟进

是的，有CSS3幻灯片库。这是一个看起来很有吸引力并且反应灵敏的：https://github.com/css-slider/image-slider。这是一个关于从Smashing Magazine创建CSS3幻灯片的教程：http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/。

您可能已经知道下面的信息，但是在投入大量时间使用技术（CSS3或JavaScript）之前需要检查的是图库在旧版浏览器和手持设备上的显示方式，并且工作简单 - 这些设备的解决方法。

一种技巧是将图库放在一个单独的div中，可以为旧浏览器/设备隐藏。然后使用background-size：cover或其他技术作为后备。还要记住触摸屏上的IE10和IE11可能很小，并且还需要测试。在不远远超出原始问题范围的情况下，有几种很好的方法可以检测设备/浏览器，包括Modernizr，Matt Stow的布局引擎，Categorizr.js和Internet Exlporer的条件评论。

附注：问题中列出的示例网站显示了一个大的单个图像作为背景，如果有幻灯片显示，则使用最新版本的Firefox无法正常工作。

在隐藏溢出div标记中缩放并居中对齐<img/>

1 个答案:

跟进