html image not fitting in image-wrapper

Question

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

Answer 1

"Do i have to crop the image via php..."

Depending on the Image file-size its strongly recommendable to use PHP for this purpose. Remember the clients browser will always load the complete image to resize it to the css given values.

So even if you got a style telling the image shall never exceed 100x100px the client's browser will load the full size image.

That could take "very long" if its a giant image (referring to the file size).

There are pretty nice classes/libs you can use with PHP to get a comfortable and easy way to play with images. And your page will be much faster then.

For example i recently found:

http://wideimage.sourceforge.net/

Super sweet thing. Supports chaining and stuff.