Display an responsive picture in a normal container column layout:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<?= ResponsivePics::get_picture(1, 'xs-12, sm-6, md-4'); ?>
</div>
</div>
</div>
This method will output a <picture> element that spans 12 columns from the xs breakpoint and up, 6 columns from the sm breakpoint and up and 4 columns from the md breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1400px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-340x226.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-340x226@2x.jpg 2x" /> <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-340x226.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-340x226@2x.jpg 2x" /> <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-300x200.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-300x200@2x.jpg 2x" /> <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-220x146.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-220x146@2x.jpg 2x" /> <source media="(min-width: 576px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-250x166.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-250x166@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-556x370.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-556x370@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Grid system columns example" /> </picture>
When your image is not in a container and you want to display your image as wide as the next breakpoint, you can use the -full shorthand:
<?= ResponsivePics::get_picture(1, 'xs-full'); ?>
This method will output a <picture> element with a width of the next ascending breakpoint. In this case: 576px from the xs breakpoint and up, 768px from the sm breakpoint and up, 992px from the md breakpoint and up, 1200px from the lg breakpoint and up and 1200px from the xl breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1400px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-1400x904.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-1400x904@2x.jpg 2x" /> <source media="(min-width: 1200px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-1400x904.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-1400x904@2x.jpg 2x" /> <source media="(min-width: 992px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-1200x775.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-1200x775@2x.jpg 2x" /> <source media="(min-width: 768px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-992x640.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-992x640@2x.jpg 2x" /> <source media="(min-width: 576px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-768x496.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-768x496@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-576x372.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-576x372@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Full width image example" /> </picture>
When your image is not in a normal container or column layout, you can also use custom image widths:
<?= ResponsivePics::get_picture(1, 'xs:500, sm:725, md:950'); ?>
This method will output a <picture> element of 500px from the xs breakpoint and up, 725px from the sm breakpoint and up and 950px from the md breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/hyunwon-jang-741306-unsplash-950x633.jpg 1x, /app/uploads/2019/06/hyunwon-jang-741306-unsplash-950x633@2x.jpg 2x" /> <source media="(min-width: 576px)" srcset="/app/uploads/2019/06/hyunwon-jang-741306-unsplash-725x483.jpg 1x, /app/uploads/2019/06/hyunwon-jang-741306-unsplash-725x483@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/hyunwon-jang-741306-unsplash-500x333.jpg 1x, /app/uploads/2019/06/hyunwon-jang-741306-unsplash-500x333@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom image sizes example" /> </picture>
You can also mix container column image widths with custom image widths:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-12">
<?= ResponsivePics::get_picture(1, 'xs-12, md-6, lg:800, xl:1024'); ?>
</div>
</div>
</div>
This method will output a <picture> element that spans 12 columns from the xs breakpoint and up, 6 columns from the md breakpoint and up, 800px from the lg breakpoint and up and 1000px from the xl breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-1000x666.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-1000x666@2x.jpg 2x" /> <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-800x533.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-800x533@2x.jpg 2x" /> <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-340x226.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-340x226@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-556x370.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-556x370@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Combined image sizes example" /> </picture>
When your picture needs to change size on a non-default breakpoint, you can also use custom breakpoints:
<?= ResponsivePics::get_picture(1, '400:200, 800:400'); ?>
This method will output a <picture> element that spans 200px from 400px breakpoint and up and 400px from 800px breakpoint and up.
Since we didn’t define any image size before breakpoint 400px, the image won’t be resized from breakpoint 0px to 400px which will be bad for performance.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 800px)" srcset="/app/uploads/2019/06/denys-nevozhai-189623-unsplash-400x284.jpg 1x, /app/uploads/2019/06/denys-nevozhai-189623-unsplash-400x284@2x.jpg 2x" /> <source media="(min-width: 400px)" srcset="/app/uploads/2019/06/denys-nevozhai-189623-unsplash-200x142.jpg 1x, /app/uploads/2019/06/denys-nevozhai-189623-unsplash-200x142@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/denys-nevozhai-189623-unsplash.jpg" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom breakpoints example" /> </picture>
When you want to limit the height of your picture without cropping it, you can set the image height:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-lg-12">
<?= ResponsivePics::get_picture(1, 'xs-12 800, md-8 500, lg:400 400, xl:600/0.75'); ?>
</div>
</div>
</div>
This method will output a <picture> element that spans 12 columns and a max height of 800px from the xs breakpoint and up, 8 columns and a max height of 500px from the md breakpoint and up, 400px and a max height of 400px from the lg breakpoint and up and 600px and a max height of 600px * 0.75 (= 450px) from the xl breakpoint and up.
When setting a height, ResponsivePics will try to resize the image to the desired height only if the resulting image width will be smaller than the calculated column class width or fixed pixel width.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-600x450.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-600x450@2x.jpg 2x" /> <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400@2x.jpg 2x" /> <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-460x500.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-460x500@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-556x800.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-556x800@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom image heights example" /> </picture>
When you want full control over your picture dimensions, you can enable cropping:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-lg-12">
<?= ResponsivePics::get_picture(1, 'xs-12 800|c, md-8 500|c, lg:400 400|l t, xl:500/0.75|r b'); ?>
</div>
</div>
</div>
This method will output a <picture> element that spans 12 columns and with a height of 800px cropped from the center from the xs breakpoint and up, 8 columns and a height of 500px cropped from the center from the md breakpoint and up, 400px and a height of 400px cropped from the left top from the lg breakpoint and up and 600px and a height of 600px * 0.75 (= 450px) cropped from the right bottom from the xl breakpoint and up.
When setting a height and a crop, ResponsivePics will try to resize and crop the image to the desired width and height only if the original image dimensions allow it. Otherwise it will show the original image for that breakpoint.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-500x375-right-bottom.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-500x375-right-bottom@2x.jpg 2x" /> <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400-left-top.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400-left-top@2x.jpg 2x" /> <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-460x500-center-center.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-460x500-center-center@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-556x800-center-center.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-556x800-center-center@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom image heights example" /> </picture>
To enable lazy loading for your responsive picture, pass true as the 4th parameter:
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-10 col-xl-8">
<?= ResponsivePics::get_picture(1, 'xs-12, lg-10, xl-8', 'lazyload-effect', true); ?>
</div>
</div>
</div>
Now your responsive image will only load when it’s in the viewport and thus will increase performance on your website!
Additionally you could even add a fade-in css effect once the image is lazyloaded:
picture.lazyload-effect {
img {
&.lazyload,
&.lazyloading {
opacity: 0;
transition: opacity .75s ease;
}
&.lazyloaded {
opacity: 1;
}
}
}
Depending on the maximum size of the uploaded image with ID 1, the output with special lazyload markup will be something like:
<picture class="lazyload-effect"> <source media="(min-width: 1400px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-700x466.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-700x466@2x.jpg 2x" /> <source media="(min-width: 1200px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-700x466.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-700x466@2x.jpg 2x" /> <source media="(min-width: 992px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-780x520.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-780x520@2x.jpg 2x" /> <source media="(min-width: 768px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-700x466.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-700x466@2x.jpg 2x" /> <source media="(min-width: 576px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-520x346.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-520x346@2x.jpg 2x" /> <source media="(min-width: 0px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-556x370.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-556x370@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Lazyloading example" class="lazyload" /> </picture>
To enable intrinsic aspect ratio for your responsive picture, pass true as the 5th parameter:
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-10 col-xl-8">
<?= ResponsivePics::get_picture(1, 'xs-12, lg-10, xl-8', '', true, true); ?>
</div>
</div>
</div>
When you installed the Lazysizes aspectratio extension, it will try to calculate each picture’s image element’s height based upon each data-aspectratio attribute and set the height as an inline style. This way the image already takes up space in your layout.
Additionally you could even add some placeholder styling when the image is not loaded yet, but does have a height already:
picture.intrinsic {
position: relative;
display: block;
margin: 0;
width: 100%;
background: #e4e4e4 url('../images/icon.svg') no-repeat center;
background-size: 50px 50px;
&__item {
display: block;
width: 100%;
}
}
Depending on the maximum size of the uploaded image with ID 1, the output with special intrinsic markup will be something like:
<picture class="intrinsic"> <source media="(min-width: 1400px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-700x1050.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-700x1050@2x.jpg 2x" data-aspectratio="0.66666666666667" /> <source media="(min-width: 1200px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-700x1050.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-700x1050@2x.jpg 2x" data-aspectratio="0.66666666666667" /> <source media="(min-width: 992px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-780x1170.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-780x1170@2x.jpg 2x" data-aspectratio="0.66666666666667" /> <source media="(min-width: 768px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-700x1050.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-700x1050@2x.jpg 2x" data-aspectratio="0.66666666666667" /> <source media="(min-width: 576px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-520x780.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-520x780@2x.jpg 2x" data-aspectratio="0.66666666666667" /> <source media="(min-width: 0px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-556x834.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-556x834@2x.jpg 2x" data-aspectratio="0.66666666666667" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-aspectratio="" alt="Intrinsic example" class="lazyload intrinsic__item" style="width:100%;" /> </picture>
Display a responsive image in a normal container column layout.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-4 col-xl-3">
<?= ResponsivePics::get_image(1, 'xs-12, md-6, lg-4, xl-3'); ?>
</div>
</div>
</div>
This method will output a <img> element that spans 12 columns from the xs breakpoint and up, 6 columns from the md breakpoint, 4 columns from the lg breakpoint and up and 3 columns from the xl breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<img srcset="/app/uploads/2020/10/samuel-zeller-168223-250x375.jpg 250w, /app/uploads/2020/10/samuel-zeller-168223-250x375@2x.jpg 500w, /app/uploads/2020/10/samuel-zeller-168223-250x375.jpg 250w, /app/uploads/2020/10/samuel-zeller-168223-250x375@2x.jpg 500w, /app/uploads/2020/10/samuel-zeller-168223-300x450.jpg 300w, /app/uploads/2020/10/samuel-zeller-168223-300x450@2x.jpg 600w, /app/uploads/2020/10/samuel-zeller-168223-340x510.jpg 340w, /app/uploads/2020/10/samuel-zeller-168223-340x510@2x.jpg 680w, /app/uploads/2020/10/samuel-zeller-168223-520x780.jpg 520w, /app/uploads/2020/10/samuel-zeller-168223-520x780@2x.jpg 1040w, /app/uploads/2020/10/samuel-zeller-168223-556x834.jpg 556w, /app/uploads/2020/10/samuel-zeller-168223-556x834@2x.jpg 1112w" sizes="(min-width: 1400px) 250px, (min-width: 1200px) 250px, (min-width: 992px) 300px, (min-width: 768px) 340px, (min-width: 576px) 520px, (min-width: 0px) 556px, 100vw" src="/app/uploads/2020/10/samuel-zeller-168223.jpg" alt="Responsive image"/>
Display a responsive image in a normal container column layout with a cropped height from the left bottom of 75% of the width.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-12">
<?= ResponsivePics::get_image(1, 'xs-12, md-6, lg:400', 0,75|l b); ?>
</div>
</div>
</div>
This method will output a <img> element that spans 12 columns from the xs breakpoint and up, 6 columns from the md breakpoint and up and 400px from the lg breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<img srcset="/app/uploads/2020/09/alex-shutin-204369-unsplash-400x300-left-bottom.jpg 400w, /app/uploads/2020/09/alex-shutin-204369-unsplash-400x300-left-bottom@2x.jpg 800w, /app/uploads/2020/09/alex-shutin-204369-unsplash-340x255-left-bottom.jpg 340w, /app/uploads/2020/09/alex-shutin-204369-unsplash-340x255-left-bottom@2x.jpg 680w, /app/uploads/2020/09/alex-shutin-204369-unsplash-556x417-left-bottom.jpg 556w, /app/uploads/2020/09/alex-shutin-204369-unsplash-556x417-left-bottom@2x.jpg 1112w" sizes="(min-width: 992px) 400px, (min-width: 768px) 340px, (min-width: 0px) 556px, 100vw" src="/app/uploads/2020/09/alex-shutin-204369-unsplash.jpg" alt="Image with srcset & sizes attacking example"/>
When you want to create a responsive background image, you can use the get_background function.
For displaying a responsive background image in a normal container column layout:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-lg-4 col-xl-6">
<?= ResponsivePics::get_background(1, 'xs-12, md-8, lg-4, xl-6', 'responsive-bg-example'); ?>
</div>
</div>
</div>
Don’t forget to style your background image otherwise you won’t see anything. You can do this by passing a css class as the 3rd parameter:
.responsive-bg-example {
display: block;
width: 100%;
overflow: hidden;
height: 0;
padding-top: 75%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<style scoped="scoped" type="text/css">
@media (min-width: 0px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-556x370.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 0px), only screen and (min-resolution: 192dpi) and (min-width: 0px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-556x370@2x.jpg");}
}
@media (min-width: 576px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-520x346.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 576px), only screen and (min-resolution: 192dpi) and (min-width: 576px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-520x346@2x.jpg");}
}
@media (min-width: 768px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-460x306.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px), only screen and (min-resolution: 192dpi) and (min-width: 768px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-460x306@2x.jpg");}
}
@media (min-width: 992px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-300x200.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 992px), only screen and (min-resolution: 192dpi) and (min-width: 992px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-300x200@2x.jpg");}
}
@media (min-width: 1200px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-520x346.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1200px), only screen and (min-resolution: 192dpi) and (min-width: 1200px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-520x346@2x.jpg");}
}
@media (min-width: 1400px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-520x346.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1400px), only screen and (min-resolution: 192dpi) and (min-width: 1400px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-520x346@2x.jpg");}
}
}
</style>
<div class="responsive-bg-example" id="responsive-pics-background-708"></div>
In this example, we will be creating a full-width banner background image with a responsive aspect ratio:
<?= ResponsivePics::get_background(1, 'xs-full/0.65|c, sm-full/0.5|c, md-full|c, lg-full/0.5|c, xl:1500/0.35|c, 1500:1750/0.35|c, 1750:2000/0.3|c, 2000:2500/0.25|c', 'my-hero-bg-example'); ?>
When you pass a class as the 3rd parameter, you can style the div that contains the background image:
.my-hero-bg-example {
display: block;
width: 100%;
height: 65vw;
background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: background-image .75s ease;
@include media-breakpoint-up(sm) {
height: 50vw;
}
@include media-breakpoint-up(lg) {
height: 40vw;
}
@include media-breakpoint-up(xl) {
height: 35vw;
}
@media (min-width: 1600px) {
height: 30vw;
}
@media (min-width: 2000px) {
height: 25vw;
}
}
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<style scoped="scoped" type="text/css">
@media (min-width: 0px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-576x374-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 0px), only screen and (min-resolution: 192dpi) and (min-width: 0px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-576x374-center-center@2x.jpg");}
}
@media (min-width: 576px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-768x384-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 576px), only screen and (min-resolution: 192dpi) and (min-width: 576px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-768x384-center-center@2x.jpg");}
}
@media (min-width: 992px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1200x480-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 992px), only screen and (min-resolution: 192dpi) and (min-width: 992px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1200x480-center-center@2x.jpg");}
}
@media (min-width: 1200px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1500x525-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1200px), only screen and (min-resolution: 192dpi) and (min-width: 1200px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1500x525-center-center@2x.jpg");}
}
@media (min-width: 1500px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1750x612-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1500px), only screen and (min-resolution: 192dpi) and (min-width: 1500px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1750x612-center-center@2x.jpg");}
}
@media (min-width: 1750px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2000x600-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1750px), only screen and (min-resolution: 192dpi) and (min-width: 1750px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2000x600-center-center@2x.jpg");}
}
@media (min-width: 2000px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2500x625-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 2000px), only screen and (min-resolution: 192dpi) and (min-width: 2000px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2500x625-center-center@2x.jpg");}
}
}
</style>
<div class="my-hero-bg-example" id="responsive-pics-background-581"></div>