css - 使用 CSS 的全宽滑块标题图像的焦点位置

Question

我想将滑块全宽标题图像的焦点设置为中心。我曾尝试使用背景位置，但这不起作用，因为我认为使用了与背景 URL 不同的方法。

请参阅下面的链接。图像被裁剪以适合高度。您可以看到酒店房间的图像集中在图像的顶部。我想将焦点设置在图像的中心以显示图像的重要部分。我知道我可以优化图像以适应，但我想保持灯箱图像的原始高度。

http://y1y.036.myftpupload.com/hotel/test?check_in=15-05-2020&check_out=22-05-2020¤cy=JPY&v=8c1b67db499d

提前致谢。

标签： cssimagesliderposition

Answer 1

试试这个造型：

.outer-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px; 
    overflow: hidden;
}
.outer-container img {
    flex: none;
}