Image Size & Position
CSS Image Size & Position
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
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
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>