css attr() responsive HD images ?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>responsive image : span images v2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>

        .img{
            display: inline-block;
            vertical-align: baseline;
            overflow: hidden;
            background-size: 100% auto;
            background-position: 0 0;
            position: relative;
        }


        /* simple marker */
        .img[data-hdsrc]{
            border:1px solid red;
        }

        /* to show some attr() support */
        .img:after{
            content: attr(data-hdsrc);
        }

        /* to use with a device pixel ratio media query */
        .img{
            background-image: attr(data-hdsrc); /* won't do it, neither url( attr(data-hdsrc) ) */
            width: 400px;
            height: 200px;
        }

    </style>

</head>
<body>

    <p>
        <i class="img" data-hdsrc="url(http://lorempixel.com/800/400/city/6/highres/)">
            some hidden alt replacement here ?
        </i>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, sit, corrupti dicta quod quo atque alias natus a unde voluptatem architecto perspiciatis modi perferendis ex odio similique deleniti voluptatum. Itaque.
    </p>


</body></html>