html - 使图像居中而不使用 css 拉伸(stretch)和调整大小

Question

我试图将 div 中的图像位置置于画廊的中心。查看以下链接http://geeksdoor.in/ghouri/portfolio.php

.gallery-item, .grid-sizer {
    width:25%;
    height:200px;    
    display:block; 
    position:relative;
    overflow:hidden; 
}

.gallery-item img, .grid-sizer img {
    position:relative;
    top:0;
    left:0; 
    width:100%;
    max-height:100%;
    display: block;
    overflow:hidden;
    z-index:1;
}

在这个页面 http://geeksdoor.in/ghouri/portfolio-single.php?type=int&imgnumb=0

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-size: cover; */
background-attachment: scroll;
background-position: center;
background-repeat: no-repeat;
background-origin: content-box;

第一个图像很好， slider 中的其他图像被拉伸(stretch)了。

如果CSS中有任何错误，请帮助!!提前谢谢大家。

Answer 1

首先，请压缩您的图像。我正在加载 4 兆字节的图像，这绝对会破坏性能并消耗您的移动数据包。

其次，最好预先调整图像的大小，以防止奇怪的拉伸(stretch)和变形。现在添加 CSS 只会弄乱您的图像，因为它们根本不适合您的容器。