奇思妙想：巧夺天工，一页源码搞定原始大图片居中显示！

2023-11-23 21:13:55

灵感闪现：网页巧妙居中显示原始大图片

今天在锤子手机官网看到一个活动页，它的内容布局让我眼前一亮。.wrapper-banner 是个普通的 div block 元素；.content-banner 是 relative 的；img 是一张大~图片，宽 2560px；a.hot 是绝对定位元素，使用了 left、top、bottom 属性。这种组合，使图片自动适应页面宽度，如果宽度不足以完整显示，图片就会自动缩小，同时保持居中。我茅塞顿开，原来居中显示大图片还可以有如此妙招！

步骤分解：揭秘居中奥秘

构思容器框架。 首先，你需要两个容器：.wrapper-banner 和 .content-banner。.wrapper-banner 负责控制图片的整体尺寸，.content-banner 则负责相对定位。
添加原始大图。 然后，你需要添加一张原始大图。这张图片可以是任何大小，但要注意，如果图片太小，效果可能不太明显。
设定尺寸参数。 接下来，你需要设置 .wrapper-banner 和 .content-banner 的尺寸参数。.wrapper-banner 的宽度应与页面宽度相同，高度可以根据需要设置。.content-banner 的宽度和高度都应与图片的原始尺寸相同。
设置图片样式。 最后，你需要设置图片的样式。将图片的宽高设置为 100%，使其填充整个 .content-banner。同时，设置图片的 object-fit 属性为 contain，这样图片就会在不失真的情况下自动缩小。

实例演示：代码展现奇思妙想

<div class="wrapper-banner">
    <div class="content-banner">
        <img src="image.jpg">
        <a class="hot" href="#">立即购买</a>
    </div>
</div>

.wrapper-banner {
    width: 100%;
    height: 500px;
}

.content-banner {
    position: relative;
    width: 2560px;
    height: 1440px;
}

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}