css - 试图弄清楚为什么一个图像在容器外缩放

Question

我正在尝试缩放图像。我让它工作但遇到了一个我无法解释的奇怪情况。为了减少 div 等元素的数量，我在下面创建了两个部分，一个使用轮播，另一个只是普通的 div。

在第一部分..图像保持在边界内并很好地放大..太棒了!!!

在第二部分中，图像扩展到了它边界的一侧..

似乎使用轮播可以保持图像的边界。

<div class="w3-container w3-padding-10" >
<div class="w3-row">

    <div class="container" style="background-color:black; width:100%; margin:0">
    <div class="carousel slide" data-ride="carousel" style="background-color:black; width:100%; margin:0">

        <div class="carousel-inner">

        <div class="item active">
        <img class="imgx" src="w3images/img1.jpg"  style="width:100%;">
        </div>

        </div>

    </div>
    </div>


</div>
</div>
</section>





    <!--Section 2 -->
  <section  style="background-color:red; no-repeat;background-size: cover;">

<div class="w3-container w3-padding-10" >
<div class="w3-row">

    <div >
    <img class="imgx" src="w3images/img1.jpg"  style="width:100%;">
    </div>

</div>
</div>

</section>

样式表；

<style>
/* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
    from
    {
        -webkit-transform: scale(1,1);

    }
    to
    {
        -webkit-transform: scale(1.5,1.5);
    }
}

/* Standard syntax */
@keyframes zoom {
    from
    {
    transform: scale(1,1);
    }
    to
    {
    transform: scale(1.5,1.5);
    }
}


.imgx {
    -webkit-animation: zoom 10s;
    -webkit-animation-fill-mode: forwards;

    animation: zoom 30s;
    animation-fill-mode: forwards;
}
</style>

任何想法

Answer 1

当图像缩放时，您需要为父 div 设置固定宽度:

.carousel-inner .item{
  width:100px;
  height:100px;
  overflow:hidden;
}

.w3-row>div{
  width:100px;
  height:100px;
  overflow:hidden;
}

.big-container {
  width: 500px;
}


.carousel-inner .item{
  width:100px;
  height:100px;
  overflow:hidden;
}

.w3-row>div{
  width:100px;
  height:100px;
  overflow:hidden;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(2.5, 2.5);
  }
}

/* Standard syntax */
@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(2.5, 2.5);
  }
}

.imgx {
  -webkit-animation: zoom 10s;
  -webkit-animation-fill-mode: forwards;

  animation: zoom 30s;
  animation-fill-mode: forwards;
}

<div class="big-container">
  <div class="w3-container w3-padding-10">
    <div class="w3-row">

      <div class="container" style="background-color:black; width:100%; margin:0">
        <div class="carousel slide" data-ride="carousel" style="background-color:black; width:100%; margin:0">

          <div class="carousel-inner">

            <div class="item active">
              <img class="imgx" src="https://dummyimage.com/100x100/ed5fed/ffffff" style="width:100%;">
            </div>

          </div>

        </div>
      </div>


    </div>
  </div>
  </section>


  <!--Section 2 -->
  <section style="background-color:red; no-repeat;background-size: cover;">

    <div class="w3-container w3-padding-10">
      <div class="w3-row">

        <div>
          <img class="imgx" src="https://dummyimage.com/100x100/ed5fed/ffffff" style="width:100%;">
        </div>

      </div>
    </div>

  </section>
  <div>