裁剪图像设置为背景而无需拉伸

裁剪图像和设置为背景无拉伸和背景图像应为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

裁剪图像设置为背景而无需拉伸

回答

相关问题