Показ різних зображень в відповідності до ширини області відтворення

Category: CSS code examples, HTML code examples

<img
src-"img/benders.jpeg" sizes="
(min-width: 320px) 320w,
(min-width: 480px) 480w,
(min-width: 640px) 640w,
(min-width: 1024px) 1024w"
srcset-"
img/resized/benders-320.jpeg 320w, img/resized/benders-480.jpeg 480w, img/resized/benders-640.jpeg 640w, img/benders.jpeg 1024w"
alt-”” class-"img-responsive img-center" />

Ще приклад

<img srcset="/img/new-york-sm.jpg 120w,
             /img/new-york-md.jpg 200w,
             /img/new-york-lg.jpg 300w"
     sizes="((min-width: 10em) and (max-width: 20em)) 10em,
            ((min-width: 30em) and (max-width: 40em)) 30em,
             (min-width: 40em) 40em">

Карбон філдс варіант

<?php
    get_header("second");
    if( carbon_get_post_meta( get_the_ID(), 'main_post_image' ) != '' ) {
        $img_id = carbon_get_post_meta( get_the_ID(), 'main_post_image' );
        $img_480 = wp_get_attachment_image_url( $img_id, 'thumbnail' );
        $img_1080 = wp_get_attachment_image_url( $img_id, 'medium' );
        $img_1920 = wp_get_attachment_image_url( $img_id, 'large' );
    } else {
        $default = 'https://SITE/blog-latest-img.png';
        $img_480 = $img_1080 = $img_1920 = $default;
    }
?>

<img
    src-"<?php echo $img_480; ?>" sizes="(min-width: 1px) 480w, (min-width: 481px) 1080w, (min-width: 1081px) 1920w"
    srcset="<?php echo $img_480; ?> 320w, <?php echo $img_1080; ?> 1080w, <?php echo $img_1920; ?> 1920w"
    alt="<?php echo get_the_title(); ?>" 
    title ="<?php echo get_the_title(); ?>"/>