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.

Answer 2

You should be able to do this:

.image-wrap img { max-width:100%; height:auto; }

This will constrain, and scale down the image, and set it to be 100% wide, according to however wide the parent element is.

Answer 3

Having in mind that you'll use an img html tag, make the image wrap div in position:relative and overflow:hidden and the image with position:absolute and height:100%, width:auto (or width:100% and height:auto). This way the image will be cropped in the parent container and keep its ratio.

See this demo and resize the frame to see how the image is cropped and resized in various dimensions.