javascript - 根据div宽度调整图像大小

Question

我有一个根据浏览器宽度调整大小的 div 宽度，现在它设置为 80%。

我想要完成的是根据图像大小，我希望图像占据整个 div 宽度。如果是小图片，请保持图片大小和居中。

在我的 fiddle 中，任何宽度超过 800 像素 的图像都应从右侧开始并根据 div 重新调整大小进行扩展。它应该始终触及右侧并以 div 宽度扩展。

如果图片宽度小于或等于 500px，它应该保持原来的大小并根据 div 调整大小，但只停留在 div 的中间。

问题是，我不确定如何只影响某些图像，我想要一个检测图像大小的解决方案，因为图像可能会切换。

.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

尝试使用 jQuery 来检测图像的大小。

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

所需的 CSS 是:

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