Picture Element Practice


by Jeremy Caudle
code

I've been wanting to get more familiar with the picture element and the srcset attribute, so I made use of a photo of this little bird I spotted on a wire outside my window today. The photo should be square if your device is in portrait orientation, and the photo should be a wide crop if your device is in landscape orientation.

Photograph of small bird signing while perched on a wire.

View the code:

HTML and JS 
<section class="code-block">
            <picture>
                <source media="(orientation: portrait)" srcset="https://jeremycaudle.com/ast/img/lilbird_square.jpg 600w" />
                <source srcset="https://jeremycaudle.com/ast/img/lilbird_wide.jpg 849w"  />
                <img src="https://jeremycaudle.com/ast/img/lilbird_lowres.png" alt="Photograph of small bird signing while perched on a wire." />
            </picture>
        </section>
CSS 
section.code-block {
                display: grid;
                place-items: center;
                margin: 1rem auto;
                padding: 0;
            }

           .code-block picture img{
               min-width: 100%;
               max-height: 478px;
               background-color: #dedede;
            }

            @media (max-width: 499px) {
                .code-block picture img {
                    max-width: 400px;
                }
            }

            @media (min-width: 600px) {
                .code-block picture img {
                    max-width: calc(667px - 2rem);
										height: auto;
                }
            }

Tags