根据div宽度调整图像大小

I have a div width that resizes according to the browser width, right now it is set to 80%.

我有一个div宽度根据浏览器宽度调整大小,现在它设置为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.

我想要完成的是取决于图像大小,我希望图像占据整个div宽度。如果是小图像,请保持图像大小和中心。

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.

在我的小提琴中,任何超过800px的图像宽度应该从右边开始并根据div重新尺寸进行扩展。它应始终触摸右侧并以div宽度扩展。

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.

如果图像宽度小于或等于500px,它应该保持它的大小并根据div调整大小但仅保留在div的中间。

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>

2 个解决方案

#1

Try using jQuery to detect the image's size.

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

$('.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:

并且所需的css将是:

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

#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.

我认为你应该能够将图像放在div的背景中并使其宽度和高度百分比值。

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

#1