Question

我正在尝试进行图像缩放。我有它工作但遇到了一个我无法解释的奇怪情况。在试图减少div等元素的数量时，我创建了两个部分，一个使用旋转木马，另一个只是普通的div。

在第一部分..图像保持在它的边界内并且放大很好..很棒!!!

在第二部分中，图像扩展出边界..

似乎使用轮播将图像保持在一定范围内。

Protocol     Name

1            Peer
3            Unknown
4            Unknown

样式表;

<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>

任何想法

Answer 1

＆＃13;

$(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");
	});
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

这是你想要的吗？

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>

试图找出为什么一个图像缩放到它的容器之外

2 个答案: