根据引导程序中的父映像重新缩放映像

Rescaling images based off parent image in Bootstrap

本文关键字：映像 新缩放 缩放 引导程序      更新时间：2023-09-26

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

图表示例

不确定我是否设置错误，错过了某些内容或试图超出引导程序所能做的事情。

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

.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 做一些事情，一旦父图像的大小被更改，就会重新缩放所有子图像？

你应该做的是这个

<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%;
}
相关文章：