【CSS Image】Compare Differenct CSS Image Size & Position Attributes: sobject-fit, object-position, background-size, background-position

Photo by Pankaj Patel on Unsplash

object-fit

https://developer.mozilla.org/zh-TW/docs/Web/CSS/object-fit

img {
    /* Keyword values */
    object-fit: fill;
    object-fit: contain;
    object-fit: cover;
    object-fit: none;
    object-fit: scale-down;

    /* Global values */
    object-fit: inherit;
    object-fit: initial;
    object-fit: unset;
}

Original Image

https://loremflickr.com/600/600?lock=3333

object-fit: fill;

The replaced content is sized to fill the element’s content box:

<img src="https://loremflickr.com/600/600?lock=3333" class="fill_image" />

<style>
    .fill_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: fill;
    }
</style>

object-fit: contain;

The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box

<img src="https://loremflickr.com/600/600?lock=3333" class="contain_image" />

<style>
    .contain_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: contain;
    }
</style>

object-fit: cover;

The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box

<img src="https://loremflickr.com/600/600?lock=3333" class="cover_image" />

<style>
    .cover_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: cover;
    }
</style>

object-fit: none;

The replaced content is not resized to fit inside the element’s content box

<img src="https://loremflickr.com/600/600?lock=3333" class="none_image" />

<style>
    .none_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: none;
    }
</style>

object-fit: scale-down;

The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.

<img src="https://loremflickr.com/600/600?lock=3333" class="scale_down_image" />

<style>
    .scale_down_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: scale-down;
    }
</style>

object-position

img {
    /* Keyword values */
    object-position: top;
    object-position: bottom;
    object-position: left;
    object-position: right;
    object-position: center;

    /* <percentage> values */
    object-position: 25% 75%;

    /* <length> values */
    object-position: 0 0;
    object-position: 1cm 2cm;
    object-position: 10ch 8em;

    /* Edge offsets values */
    object-position: bottom 10px right 20px;
    object-position: right 3em bottom 10px;
    object-position: top 0 right 10px;

    /* Global values */
    object-position: inherit;
    object-position: initial;
    object-position: revert;
    object-position: revert-layer;
    object-position: unset;
}

Original cover image

object-position: top;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_top_image" />

<style>
    .position_top_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: cover;
        object-position: top;
    }
</style>

object-position: bottom;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_bottom_image" />

<style>
    .position_bottom_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: cover;
        object-position: bottom;
    }
</style>

object-position: left;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_left_image" />

<style>
    .position_left_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: contain;
        object-position: left;
    }
</style>

object-position: right;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_right_image" />

<style>
    .position_right_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: contain;
        object-position: right;
    }
</style>

object-position: center;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_center_image" />

<style>
    .position_center_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: contain;
        object-position: center;
    }
</style>

object-position: 25% 75%;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_25_75_image" />

<style>
    .position_25_75_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: contain;
        object-position: 25% 75%;
    }
</style>

object-position: 0 0;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_0_0_image" />

<style>
    .position_0_0_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: contain;
        object-position: 0 0;
    }
</style>

object-position: 1cm 2cm;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_1cm_2cm_image" />

<style>
    .position_1cm_2cm_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: contain;
        object-position: 1cm 2cm;
    }
</style>

object-position: 10ch 8em;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_10ch_8em_image" />

<style>
    .position_10ch_8em_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: contain;
        object-position: 10ch 8em;
    }
</style>

object-position: bottom 10px right 20px;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_bottom10px_right20px_image" />

<style>
    .position_bottom10px_right20px_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: contain;
        object-position: bottom 10px right 20px;
    }
</style>

object-position: right 3em bottom 10px;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_right3em_bottom10px_image" />

<style>
    .position_right3em_bottom10px_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: contain;
        object-position: right 3em bottom 10px;
    }
</style>

object-position: top 0 right 10px;

<img src="https://loremflickr.com/600/600?lock=3333" class="position_top0_right10px_image" />

<style>
    .position_top0_right10px_image {
        display: block;
        width: 600px !important;
        height: 200px !important;
        object-fit: contain;
        object-position: top 0 right 10px;
    }
</style>

background-size

.image_container {
    /* Keyword values */
    background-size: cover;
    background-size: contain;

    /* One-value syntax */
    /* the width of the image (height becomes 'auto') */
    background-size: 50%;
    background-size: 3.2em;
    background-size: 12px;
    background-size: auto;

    /* Two-value syntax */
    /* first value: width of the image, second value: height */
    background-size: 50% auto;
    background-size: 3em 25%;
    background-size: auto 6px;
    background-size: auto auto;

    /* Multiple backgrounds */
    background-size: auto, auto; /* Not to be confused with `auto auto` */
    background-size: 50%, 25%, 25%;
    background-size: 6px, auto, contain;

    /* Global values */
    background-size: inherit;
    background-size: initial;
    background-size: revert;
    background-size: revert-layer;
    background-size: unset;
}

Original image

<div class="original_background"></div>

<style>
    .original_background {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 600px !important;
    }
</style>

background-size: cover;

<div class="background_size_cover"></div>

<style>
    .background_size_cover {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
    }
</style>

background-size: contain;

<div class="background_size_contain"></div>

<style>
    .background_size_contain {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: contain;
    }
</style>

background-size: 50%;

<div class="background_size_50percent"></div>

<style>
    .background_size_50percent {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: 50%;
    }
</style>

background-size: 3.2em;

<div class="background_size_32em"></div>

<style>
    .background_size_32em {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: 3.2em;
    }
</style>

background-size: 12px;

<div class="background_size_12px"></div>

<style>
    .background_size_12px {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: 12px;
    }
</style>

background-size: auto;

<div class="background_size_auto"></div>

<style>
    .background_size_auto {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: auto;
    }
</style>

background-size: 50% auto;

<div class="background_size_50percent_auto"></div>

<style>
    .background_size_50percent_auto {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: 50% auto;
    }
</style>

background-size: 3em 25%;

<div class="background_size_3em_25percent"></div>

<style>
    .background_size_3em_25percent {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: 3em 25%;
    }
</style>

background-size: auto 6px;

<div class="background_size_auto_6px"></div>

<style>
    .background_size_auto_6px {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: auto 6px;
    }
</style>

background-size: auto auto;

<div class="background_size_auto_auto"></div>

<style>
    .background_size_auto_auto {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 600px !important;
        background-size: auto auto;
    }
</style>

background-size: auto, auto;

<div class="background_size_auto_comma_auto"></div>

<style>
    .background_size_auto_comma_auto {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 600px !important;
        background-size: auto, auto;
    }
</style>

background-size: 50%, 25%, 25%;

<div class="background_size_50percent_25percent_25percent"></div>

<style>
    .background_size_50percent_25percent_25percent {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 600px !important;
        background-size: 50%, 25%, 25%;
    }
</style>

background-size: 6px, auto, contain;

<div class="background_size_6px_auto_contain"></div>

<style>
    .background_size_6px_auto_contain {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: 6px, auto, contain;
    }
</style>

background-position

.image_container {
    /* Keyword values */
    background-position: top;
    background-position: bottom;
    background-position: left;
    background-position: right;
    background-position: center;

    /* <percentage> values */
    background-position: 25% 75%;

    /* <length> values */
    background-position: 0 0;
    background-position: 1cm 2cm;
    background-position: 10ch 8em;

    /* Multiple images */
    background-position: 0 0, center;

    /* Edge offsets values */
    background-position: bottom 10px right 20px;
    background-position: right 3em bottom 10px;
    background-position: bottom 10px right;
    background-position: top right 10px;

    /* Global values */
    background-position: inherit;
    background-position: initial;
    background-position: revert;
    background-position: revert-layer;
    background-position: unset;
}

Original image

https://loremflickr.com/600/600?lock=3333

Original cover image

<div class="background_size_cover"></div>

<style>
    .background_size_cover {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
    }
</style>

background-position: top;

<div class="background_position_top"></div>

<style>
    .background_position_top {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: top;
    }
</style>

background-position: bottom;

<div class="background_position_bottom"></div>

<style>
    .background_position_bottom {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: bottom;
    }
</style>

background-position: left;

<div class="background_position_left"></div>

<style>
    .background_position_left {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 200px !important;
        height: 600px !important;
        background-size: cover;
        background-position: left;
    }
</style>

background-position: right;

<div class="background_position_right"></div>

<style>
    .background_position_right {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 200px !important;
        height: 600px !important;
        background-size: cover;
        background-position: right;
    }
</style>

background-position: center;

<div class="background_position_center"></div>

<style>
    .background_position_center {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: center;
    }
</style>

background-position: 25% 75%;

<div class="background_position_25percent_75percent"></div>

<style>
    .background_position_25percent_75percent {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: 25% 75%;
    }
</style>

background-position: 0 0;

<div class="background_position_0_0"></div>

<style>
    .background_position_0_0 {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: 0 0;
    }
</style>

background-position: 1cm 2cm;

<div class="background_position_1cm_2cm"></div>

<style>
    .background_position_1cm_2cm {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: 1cm 2cm;
    }
</style>

background-position: 10ch 8em;

<div class="background_position_10ch_8em"></div>

<style>
    .background_position_10ch_8em {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: 10ch 8em;
    }
</style>

background-position: 0 0, center;

<div class="background_position_0_0_comma_center"></div>

<style>
    .background_position_0_0_comma_center {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: 0 0, center;
    }
</style>

background-position: bottom 10px right 20px;

<div class="background_position_bottom10px_right20px"></div>

<style>
    .background_position_bottom10px_right20px {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: bottom 10px right 20px;
    }
</style>

background-position: right 3em bottom 10px;

<div class="background_position_right3em_bottom10px"></div>

<style>
    .background_position_right3em_bottom10px {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: right 3em bottom 10px;
    }
</style>

background-position: bottom 10px right;

<div class="background_position_bottom10px_right"></div>

<style>
    .background_position_bottom10px_right {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: bottom 10px right;
    }
</style>

background-position: top right 10px;

<div class="background_position_top_right_10px"></div>

<style>
    .background_position_top_right_10px {
        background-image: url('https://loremflickr.com/600/600?lock=3333');
        width: 600px !important;
        height: 200px !important;
        background-size: cover;
        background-position: top right 10px;
    }
</style>

Reference

Donate KJ 贊助作者喝咖啡

如果這篇文章對你有幫助的話，可以透過下面支付方式贊助作者喝咖啡，如果有什麼建議或想說的話可以贊助並留言給我

If this article has been helpful to you, you can support the author by treating them to a coffee through the payment options below. If you have any suggestions or comments, feel free to sponsor and leave a message for me!

方式 Method	贊助 Donate
PayPal	https://paypal.me/kejyun
綠界 ECPay	https://p.ecpay.com.tw/AC218F1
歐付寶 OPay	https://payment.opay.tw/Broadcaster/Donate/BD2BD896029F2155041C8C8FAED3A6F8