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

Question

我正在尝试缩放图像。我有它的工作，但运行进入 st运行ge 我无法解释的情况。为了减少 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

$(document).ready(function()
{
 $("[name='oimg']").mousemove(function(e) 
 {
    $(".image").css({
   display:'block',
   left: e.pageX + 5,
   top: e.pageY + 5
  });
  
  var src = $(this).attr("src");
  $(".image").attr("src",src);
 });
 $("[name='oimg']").mouseout(function(e) 
 {
    $(".image").css("display","none");
 });
});

.image 
{
 display:none;
   position: absolute;
   width: 20%;
   height: 50%;
 border-style:solid;
 border-color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" class="image">

<div>
<img name="oimg" src="https://www.microsoft.com/en-us/CMSImages/WindowsHello_Poster_1920-1600x300-hello.png?version=0d8f51c7-ef87-b0af-8f26-453fb40b4b7d" style="width:100px; background-color:#960;padding:20px;">
<img name="oimg" src="https://static1.squarespace.com/static/528fc8ffe4b070ad8ee97493/t/558c019ae4b08aeb04726a36/1435238813669/Ladybug+Saying+Hello%21" style="width:100px; background-color:#39F; padding:20px;">
</div>

这是你想要的吗？

Answer 2

当图像缩放时，您需要为父 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>

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

Trying to figure why one image zoom outside of it container

css

css-transforms