I have a div width that resizes according to the browser width, right now it is set to 80%.
What I'm trying to accomplish is depending on the image size, I would like the image to take up the whole div width. If it's a small image, keep image size and center.
In my fiddle, any image width over 800px should start from the right and expand according to the div re-size. It should always touch the right side and expand with the div width.
If the image width is smaller than or equal to 500px, it should stay it's size and resize according to div but stay in middle of div only.
The problem is, I'm not sure how to only affect certain images, I would like a solution that detects the image size because the images might switch.
border:1px solid purple;
border:1px solid red;
<img src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png" alt="" class="child-img">
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg" alt="" class="child-img">