CSS设置top属性移动图片时图片尺寸变小问题求解

问题背景 #

开发网页图片轮播组件时，基础轮播功能已正常运行，需要将轮播调整到所在区块的垂直居中位置。
最初尝试给.image-container设置top: 50%;样式实现下移，出现图片尺寸缩小的异常，设置前后效果对比如下：

• 未添加top: 50%;时效果：
• 添加top: 50%;后异常效果：

现有代码 #

原有CSS代码 #

.The-Area {
    min-height: 972px;
    width: 100%;
    background-image: linear-gradient(rgba(6,4,11,0.4),rgba(6,4,1,0.3)),url(images/thumbnail_IMG_3625.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}
.The-Area-Page-Head {
    text-align: center;
    background: #000000;
    color: #fff;
    font-size: 40px;
}
.minor-header-spacer .rectangle{
    height: 20px;
    width: 100%;
    background-color: #000000;
}
.slide-container {
    width: 800px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
}
.image-container {
    top: 20%;
    width: 2400px;
    height: 600px;
    position: relative;
    transition: left 2s;
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
}
.slider-image {
    float: left;
    margin: 0px;
    padding: 0px;
}
.button-container {
    top: -20px;
    position: relative;
}
.slider-button {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background-color: white;
}
#slider-image-1:target ~ .image-container{
    left: 0px;
}
#slider-image-2:target ~ .image-container {
    left: -800px;
}
#slider-image-3:target ~ .image-container {
    left: -1600px;
}

已尝试的排查操作 #

• 猜测异常与.slide-container的overflow属性有关，尝试设置overflow-y: visible;、overflow-x: hidden;，希望保留X轴隐藏溢出轮播图的能力，同时让Y轴溢出内容正常显示。调整后图片区域新增滚动条，未解决异常，效果如下：
  
• 随后移除.slide-container的height属性值（查阅资料得知该属性会导致页面缩放时图片移动异常），操作后整个轮播组件直接回到页面顶部，未实现居中效果。

对应HTML代码 #

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="with=device-width, intial-scale=1.0">
    <title>Estepona</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@300;700&display=swap" rel="stylesheet">
</head>

<body>

<section class="The-Area">

    <!-- 头部区域 -->

    <div class="rectangle"></div>

    <div class="minor-header-spacer">
        <div class="rectangle"></div>
    </div>

    <div class="The-Area-Page-Head">
        <h1>The Area</h1>
    </div>

    <div class="minor-header-spacer">
        <div class="rectangle"></div>
    </div>

    <div class="rectangle"></div>

    <!-- 轮播主体 -->

    <div class="slide-container">

        <span id="slider-image-1"></span>
        <span id="slider-image-2"></span>
        <span id="slider-image-3"></span>

        <div class="image-container">
            <img src="images/the_area/800x600_Wallpaper_Blue_Sky.png" class="slider-image">
            <img src="images/the_area/fdr5Z7.jpg" class="slider-image">
            <img src="images/the_area/wallpapersden.com_landscape-pixel-art_800x600.jpg" class="slider-image">
        </div>

        <div class="button-container">
            <a href="#slider-image-1" class="slider-button"></a>
            <a href="#slider-image-2" class="slider-button"></a>
            <a href="#slider-image-3" class="slider-button"></a>
        </div>

    </div>


</section>

</body>

</html>

问题原因 #

之前的居中实现逻辑存在偏差：垂直居中的偏移应该加在轮播的外层视口容器.slide-container上，而非内部承载滑动图片的.image-container上。

• 给.image-container设置top偏移时，该容器为相对定位，向下偏移后容器顶部会空出对应偏移高度，内部浮动排列的图片未设置固定高度，会被父容器剩余可用高度挤压，因此出现图片缩小的异常。
• 调整overflow-x: hidden; overflow-y: visible;出现滚动条是CSS规范的既定行为：当元素某一轴的overflow设置为hidden、另一轴设置为visible时，visible值会被自动解析为auto，内容溢出时就会触发滚动条。
• 移除.slide-container的height属性后，容器失去固定高度，会被内部内容撑开，自然无法保持居中位置，同时会导致轮播滑动时布局跳动。

修复方案 #

两种方案二选一即可，不需要改动轮播核心逻辑。

方案1：Flex布局（推荐，无兼容副作用） #

直接给轮播的父容器.The-Area添加Flex布局属性，即可让内部轮播容器自动实现垂直居中，水平居中由原有margin: 0 auto逻辑实现，不会触发overflow相关异常：

.The-Area {
    min-height: 972px;
    width: 100%;
    background-image: linear-gradient(rgba(6,4,11,0.4),rgba(6,4,1,0.3)),url(images/thumbnail_IMG_3625.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
    /* 新增以下三行Flex属性 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

注意：需要移除.image-container上额外添加的top: 50%样式，保留原有样式即可。

方案2：绝对定位偏移 #

如果不想修改父容器布局，直接给.slide-container添加绝对定位实现水平+垂直居中：

.slide-container {
    width: 800px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
    /* 新增以下四行定位属性 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

注意：不要删除.slide-container的固定height属性，轮播需要固定视口高度配合overflow: hidden隐藏横向溢出的待滑动图片，删除后会导致布局错乱。

内容的提问来源于stack exchange，提问作者JoeCoxWork