根据div宽度调整图像大小

Question

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.

 .parent{ border:1px solid purple; height:100%; width:80%; float:Right; } .child{ border:1px solid red; height:100%; background:gray; text-align:center; } .child-img{ display:inline-block; max-width:100%; margin:0 auto; } .image-wrapper{ width:100%; background:orange; } img{ width:auto; height:100%; width:100%; } 

 <div class="parent"> <div class="child"> <div class="image-wrapper"> <img src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png" alt="" class="child-img"> </div> <div class="image-wrapper"> <img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg" alt="" class="child-img"> </div> <div class="image-wrapper"> <img src="https://em.wattpad.com/62f9f1c9de49ad97d7834b1e58e16a99eb2dc3c7/687474703a2f2f6170692e6e696e672e636f6d2f66696c65732f7363525a66707a54694d7a4d48484e586b7247575277674b6878726537617531666736413834472d684c484c616c7271302d6f4152524f6f525a6e55387076415a41637a545a6b4c6442476f6144496336507834395030744245426d4a646e382f50696b616368752e66756c6c2e313435323733332e6a7067?s=fit&h=360&w=360&q=80" alt="" class="child-img"> </div> <div class="image-wrapper"> <img src="http://vignette3.wikia.nocookie.net/scratchpad/images/0/02/Pikachu.gif/revision/latest?cb=20150217015901" alt="" class="child-img"> </div> </div> </div> 

Answer 1

Try using jQuery to detect the image's size.

$('.child-img').each(function() {
  if ($(this).width() > 800) { $(this).addClass('right'); }
  else if ($(this).width() < 500) {$(this).addClass('center');}
});

And the required css would be:

.child-img.right {
  display: block;
  max-width: 100%;
}
.child-image.center {
  width: auto;
 max-width: 100%;
 display: inline-block'
}
.parent { text-align: center; }

Answer 2

I think you should be able to place the image in the background of the div and make its width and height percentage values.

background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;