居中圖像沒有拉伸和使用css調整大小

我試圖將div中的圖像位置放在圖庫中。看看下面的鏈接http://geeksdoor.in/ghouri/portfolio.php 居中圖像沒有拉伸和使用css調整大小

.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;

第一形象是好的，在滑蓋其他圖像越來越捉襟見肘。

請幫忙，如果在CSS中有任何錯誤！並提前感謝球員。

來源

2016-05-16 raj

歡迎的StackOverflow！鏈接無法從我的位置打開（由於DNS），更好的方法是提供標記摘錄 – Vasfed

首先，請壓縮圖像。我正在加載4兆字節的圖像，這絕對會破壞您的移動數據包的性能和吞食量。其次，最好先調整圖像大小，以防止奇怪的拉伸和變形。現在添加CSS只會弄亂你的圖像，因爲它們無法適應你的容器。

來源

2016-05-16 13:04:15 Loek

不幸的是，圖片甚至沒有加載我可憐的互聯網連接。也許你可以使用tinyjpg壓縮你的圖像。

但也許嘗試寬度：100％和高度：自動;？或者，如果它是一個選項，請使用jquery進行嘗試。

來源

2016-05-16 13:47:43 Sphex

您需要調整您的圖片爲標準尺寸，從而使所有的圖像可以在相同的尺寸和分辨率..

對於你的投資組合，我可以建議的（1980px X 960像素）大小... 並使用「background-position：center;」屬性，以便您可以在平板電腦和手機的屏幕尺寸容易對齊，通過只需設置div的高度，按您的形象知名度..

希望它可以幫助你..

來源

2016-05-17 07:39:12

居中圖像沒有拉伸和使用css調整大小

回答

相關問題