响应式对齐、浮动和居中图像

Posted 2023-03-05

【中文标题】响应式对齐、浮动和居中图像

【英文标题】：Aligning, floating and centering images responsively

【发布时间】：2013-02-26 00:17:51

【问题描述】：

我正在尝试弄清楚如何编写 html 和 CSS 代码以使 3 个屏幕截图图像对齐，如下面的屏幕截图所示。

这个想法是当用户调整窗口的大小时，左侧和右侧的图像应该向中心移动，或者在主图像后面更紧并且主图像始终保持居中。

我的开发者链接： http://leongaban.com/portfolio/athenasweb/

我的 CodePen http://codepen.io/leongaban/pen/AwJFt

非常感谢提示或指导！ :D

HTML

<div class="pattern">

    <div class="athena_thumbs">

        <div class="first">
            <img src="../../images/athena1.jpg"/>
        </div>

        <div class="second">
            <img src="../../images/athena2.jpg"/>
        </div>

        <div class="third">
            <img src="../../images/athena3.jpg"/>
        </div>

    </div>

</div>

CSS

div.inner .pattern 
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:url('http://leongaban.com/images/pattern_diagonal_lines.png');
    background-repeat: repeat;
    z-index:2;
     

.athena_thumbs 
    position: absolute;
    max-width: 1000px;
    margin: 250px auto 0;


.athena_thumbs .first 
    position: relative;
    margin: 0 auto;
    float: left;
    left: 25%;
    right: 25%;
    z-index: 3;


.athena_thumbs .second 
    position: relative;
    float: left;
    left: 10%;
    right: 5%;
    z-index: 2;


.athena_thumbs .third 
    position: relative;
    float: left;
    right: 10%;
    left: 5%;
    z-index: 1;

【参考方案1】：

开会迟到了。 但是，如果你看一下

代码笔：http://codepen.io/anon/pen/bazEr

.athena_thumbs 
    position: absolute;
    width: 90%;
    margin-left: 5%;  
    text-align: center;
    overflow: hidden;


.athena_thumbs .first 
    position: relative;
    margin: 0 auto;
    z-index: 3;


.athena_thumbs .second 
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;


.athena_thumbs .third 
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;

我认为这会让你朝着正确的方向前进。 没有跨浏览器检查的方式。 只是基本的相应效果或多或少到位。

希望这会有所帮助。

【参考方案2】：

我希望这对您有所帮助。我已经整理了一个小演示，说明我将如何获得你想要的效果，你可以找到 here。

我会将外部缩略图设置为position: absolute;，将它们粘贴到父容器的任一侧，并确保为它们提供顶部位置以使其保持一致。将居中的缩略图设置为position: relative，并像往常一样使用自动边距将其居中。 z-indexing 将外侧拇指保持在居中拇指的后面。