Question

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

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

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

如果图片宽度小于或等于500px ，则应保持其大小并根据div调整大小但仅保留在div的中间位置。

问题是，我不确定如何仅影响某些图像，我想要一种能够检测图像尺寸的解决方案，因为图像可能会切换。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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; }

Answer 2

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

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

根据div宽度

2 个答案: