I need to fit and crop the image into it's wrapper.

```
        <div class="box desktop-3 tablet-3 tablet-ls-3 mobile-3">
            <div class="inner-box fullbox">
                <a href='#module'>
                <div class="image-wrap" >
                <img src="../img/placeholder.png" />
                </div>
                </a>
            </div>
        </div>

```

css

```
.box {
    width: 282px;
    min-height: 282px;
    padding: 10px;
    float: left;
}

.inner-box {
    width: 100%;
    min-height: 282px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    padding: 20px;
}

.fullbox {
    padding: 0px;
}

.image-wrap {
    ...
}

```

i've tried to put the image as the background like you see below, but that didn't worked for me. I want to have a image section from the image that it fits into the `box`.

```
.image-warpper {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

```

Do i have to crop the image via php or is it possible to scale or crop it in css?

Thanks