根据 div 宽度调整图像大小答案

【问题标题】：Resize image according to div width根据 div 宽度调整图像大小
【发布时间】：2016-02-09 04:53:01
【问题描述】：

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

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

在我的小提琴中，任何超过 800px 的图像宽度都应该从右侧开始并根据 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案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; }

【讨论】：

【解决方案2】：

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

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

【讨论】：