Responsive playing card design with css html

Question

I was trying to create a queue of playing card that is responsive to display width.

I want this queue to be fit to display width so that no card get lost from display. I want to cover conventional width of phone, tablet and desktop.

I also like to align this queue to center so that it does not look bad.

jsfiddle

<div> 
    <img src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
</div>

div{
    width:100%;
}
img{
    display: inline-block;
    height: 200px;
}
.rest{
    margin-left: -102px;
}

Answer 1

This is a perfect fit for the new Flexbox model!

Use display:inline-flex on your wrapping div, and remove the display:inline-block on img:

div{
    width:100%;
    display:inline-flex;
}
img{
    height: 200px;
}
.rest{
    margin-left: -102px;
    /*flex-grow:1;*/          /* Bonus : all available width is occupied */
}

The flex-grow:1 causes your img to grow, while space is available, but they are deformed.

Here's a demo, and some references and extras :

• Compatibility chart on Caniuse.com
• MDN tutorial on Flexbox
• Flex tutorial on CSSTricks.com
• Flex reference on MDN

Answer 2

If you want better browser compatibility, you can do it this way

• Have all your cards have class="rest"
• Update your CSS to this

div{
    width:100%;
    text-align:center;     /* If you want it centered */
    padding-right:102px;   /* Inverse the value of the card's right margin */
    box-sizing:border-box; /* Because we want the padding to be included in the width calculation */
}
img{
    display: inline-block;
    height: 200px;
}
.rest{
    margin-right: -102px; /* Use margin-right instead of margin-left */
}