裁剪圖像設置爲背景而無需拉伸

裁剪圖像和設置爲背景無拉伸和背景圖像應爲50％的封面圖片和50％灰色背景裁剪圖像設置爲背景而無需拉伸

HTML：

<div class="main"> 
<div class="inner-wrapper"> 
    //contain here 

</div> 
</div>

定製CSS：

This .main class is background css property

.main 
    { 
     width:1024px; 
     margin:0 auto; 
     background:url(event_cover_img.jpg); 
     background-size:100%; 
     background-repeat:no-repeat; 
     background-color:#eceeef; 
     padding-bottom:50px; 
     box-shadow: 2px 2px 2px #969494; 
    } 
    .inner-wrapper 
    { 
     padding-top:150px; 
     float:left; 
    }

This圖像是錯誤的。

This圖像是正確的。

但圖像被弄髒，所以我需要解決方案它是如何解決的？

來源

2016-02-24 Riddhi Busa

內的圖像動態生成後，所以我使用的PHP也，但這個錯誤是在CSS。 –

檢查了這一點http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped –

，你可以嘗試把一個僞類

.main::before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 50%; 
    top: 0; 
    left: 0; 
    background:url(event_cover_img.jpg); 
    background-size: cover; 
}

來源

2016-02-24 08:44:04

如果您不想拉伸圖像，請使用background-size: contain;。

來源

2016-02-24 08:39:51 ketan

裁剪圖像設置爲背景而無需拉伸

回答

相關問題