Question

我正在使用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%;
}

在Bootstrap中根据父图像重新调整图像

1 个答案: