javascript - 在 Bootstrap 中基于父图像重新缩放图像

Question

我正在使用 bootstrap 将响应式图像添加到我的网页。问题是我有几个重叠的图像，然后无法正确重新缩放。

Diagram Example

不确定我是否设置错误、遗漏了某些东西或试图超出 Bootstrap 的范围。

这是我使用的测试代码，我一直保持通用。

HTML:

<div class="col-lg-12" >
  <!-- Images inside the container image that are not being rescaled -->
  <div class="children_Images">
    <img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/> 
    <img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
    <img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/> 
  </div>
</div>

CSS:

.container{
  border: 2px solid red;
  position: relative; /* Allows children to be placed relative to the panel */
  font-size: 10px;
  z-index: 0;
  height: 100%;
  width: 100%;
}

.container img{
  max-width:100%;
  width: auto;
  position: absolute;
  border:5px solid green;
}

.children_Images
{
  transition: all 1s ease-in-out; 
}

.children_Images:hover
{
  transform: scale(1.05) translate(4em);
}

我只是想知道这是否可以通过 CSS 和 Bootstrap 实现，或者我是否应该使用 JavaScript 来做一些事情，以便在父图像的大小发生更改后重新缩放所有子图像？

Answer 1

你应该做的是这个

<div class="container">
    <div class="col-xs-4">
        <img src="" alt="" />
    </div>
    <div class="col-xs-4">
        <img src="" alt="" />
    </div>
    <div class="col-xs-4">
        <img src="" alt="" />
    </div>
</div>

和CSS

.container img {
    max-width: 100%;
}