Question

裁剪图像并设置为背景而不拉伸和背景图像应为50％封面图像和50％灰色背景

HTML：

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

</div>
</div>

的CSS：

此.main类是后台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

您可以尝试将图像放入伪类

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

Answer 2

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

作为背景的庄稼图象没有被舒展

2 个答案: