如何防止图片溢出到div中？

Question

我寻求实现以下功能：https://puu.sh/BkRe7/20235d49fc.gif 三张图片向右滑出页面，在这个过程中逐渐淡出而不溢出 - 另外三张图片滑入取代它们的位置。

Framework JFiddle：https://jsfiddle.net/pskdtzL1/64/（在 'right results' 设置中查看）

动画效果很好；问题是，传入的图像显示在 'left' div 中，尽管 'overflow:hidden' 在 'main' div 中。我希望图像显示仅限于它们所在的 div。

感谢您的帮助。

HTML

<div class="row">
    <div class="left">
    Stuff
    </div>

    <div class="main">
    <!-- several <img> and a <button>-->
    </div>
</div>

CSS

* {box-sizing: border-box;}   
.row {display: flex; flex-wrap: wrap;} 
.left {flex: 20%;
       background-color: #f1f1f1;
       padding: 20px;}
.main {flex: 80%;
       background-color: white;
       padding: 20px;
       overflow: hidden;}
.lleft {position:absolute; left: -300px;} 

/* Animation CSS */

JScript

function Btn(){
  document.getElementById('bx1').classList.add('outward'); 
  ... 
  document.getElementById('bx4').classList.add('inward'); 
  ...
  document.getElementById('bx0').removeAttribute('style');}

  /* 'outward' & 'inward' = CSS animations */

Answer 1

我现在不能评论，所以我会尽力提供一个答案。

由于图像嵌套在主容器内，您可以添加属性:

position: relative;

到主要 class,

.main {
    ...
    position: relative;
}

这样在 main class 内完成的任何定位都将相对于 main 的容器。

Answer 2

我在 class .left 中添加了一个 z-index，并将正文的 padding/margin 设置为零。

function Btn() {
  document.getElementById('bx1').classList.add('outward');
  document.getElementById('bx2').classList.add('outward');
  document.getElementById('bx3').classList.add('outward');
  document.getElementById('bx4').classList.add('inward');
  document.getElementById('bx5').classList.add('inward');
  document.getElementById('bx6').classList.add('inward');
  document.getElementById('bx0').removeAttribute('style');
}

* {
  box-sizing: border-box;
}


/* Added */
body {
  padding: 0;
  margin: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.left {
  flex: 20%;
  background-color: #f1f1f1;
  padding: 20px;
  z-index: 50; /* Added */
}

.main {
  flex: 80%;
  background-color: white;
  padding: 20px;
  overflow: hidden;
}

.lleft {
  position: absolute;
  left: -300px;
}

* {
  box-sizing: border-box;
}


/* Animations*/

.outward {
  animation-name: myAnimation;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
}

.inward {
  animation-name: myAnimation2;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
}

@keyframes myAnimation {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    transform: translateX(600px);
    opacity: 0;
    display: none;
  }
}

@keyframes myAnimation2 {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  100% {
    transform: translateX(500px);
    opacity: 1;
  }
}

<div class="row">
  <div class="left">
    Stuff
  </div>
  <div class="main">
    <img id="bx1" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    <img id="bx2" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    <img id="bx3" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    <span style="padding-left: 90px" </span>
    <span class="lleft" id="bx0" style="display: none">
      <img id="bx4" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
      <img id="bx5" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
      <img id="bx6" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    </span><br>
    <button onclick="Btn()">Slide</button>
  </div>
</div>

如何防止图片溢出到div中？

How to keep images from overflowing into divs?

html

css

animation

overflow