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

Question

裁剪图片并设置为不拉伸的背景，背景图片应为 50% 封面图片和 50% 灰色背景

HTML:

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

</div>
</div>

Css:

这个 .main class 是背景 css 属性

    .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 图片正确。

但是图像是浆糊的，所以我需要解决办法它是如何解决的？

Answer 1

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

Answer 2

你可以试试把图片放在伪class

里面

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

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

Crop image set as background without stretched

html

css

background

image

background-image