在隐藏的溢出 div 标签中缩放和居中对齐 <img>

Posted 2023-03-06

【中文标题】在隐藏的溢出 div 标签中缩放和居中对齐 <img>

【英文标题】：Scale and centre align <img> in hidden overflow div tag

【发布时间】：2014-12-14 06:22:31

【问题描述】：

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

这是我目前的代码。

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，我可以让图像保持居中，或放大和缩小，但不能同时进行。这就是我要在这里实现的目标。有没有办法将两者结合起来才能做到这一点？

【参考方案1】：

尝试使用 CSS background-size:cover;。封面缩小和扩大以适应各种窗口大小，而不会扭曲图像。如果屏幕尺寸比例与图像不同，它将根据您的定位方式（顶部、底部、中心、右侧、左侧、中心）裁剪边缘。保持图像比例是 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 中，该 div 可以为旧版浏览器/设备隐藏。然后使用 background-size:cover 或其他技术作为后备。还要记住，触摸屏上的 IE10 和 IE11 可能会出现故障，并且还需要测试。在不超出您最初问题的范围的情况下，有几种检测设备/浏览器的好方法，包括 Modernizr、Matt Stow 的布局引擎、Categorizr.js 和 Internet Exlporer 的 Conditional Comments。

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

【讨论】：

是否可以使用 CSS 过渡或类似的方法将背景图像制作成包含“x”张图像的幻灯片？

是的，有 CSS3 幻灯片，资源列在答案底部。