Question

我试图让我的缩略图放大但没有超出300px x 300px区域。我已经在这里阅读了这些问题，但仍然无法让我的工作。

这就是它的样子： http://jsbin.com/nuduciyaja/1/edit?html,css,output

<body>
    <div class=flexContainer>
        <div class="images">
            <img src="http://via.placeholder.com/300x300"/>
        </div>
        <div class="images">
            <img src="http://via.placeholder.com/300x300"/>
        </div>

CSS：

.flexContainer {
    display: flex;
    flex-wrap: wrap;
    width: 1032px;
    margin: auto;
    background-color: DodgerBlue;
    overflow: hidden;
 }

.images {
    margin: 15px;
    width: 300px;
    height: 300px;

}

.flexContainer img {
    border: 5px black solid;
}

这就是我想要的样子： http://jsbin.com/hunikaruxu/1/edit?html,css,output

Answer 1

您必须将某些html结构和css更改为

下面的代码段

＆＃13;

/*=======================================
  GALLERY SECTION ANIMATION
  =======================================*/

.flexContainer {
	display: flex;
	flex-wrap: wrap;
  width: 1032px;
	margin: auto;
	background-color: DodgerBlue;
  overflow: hidden;
}

.images {
  margin: 15px;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 5px black solid;
}
/* ================================= 
  Photo Overlay Transitions
==================================== */

img {
    transition: transform .5s;
	transform-origin: 50% 50%;
}

img:hover {
    transform: scale(1.1);
}

＆＃13;

  <div class="photoContainer">
		<div class=flexContainer>
      <div class="images">
        <img src="http://via.placeholder.com/300x300"/>
      </div>
      <div class="images">
        <img  src="http://via.placeholder.com/300x300"/>
      </div>
      <div class="images">
        <img src="http://via.placeholder.com/300x300"/>
      </div>
      <div class="images">
        <img src="http://via.placeholder.com/300x300"/>
      </div>
		</div>
  </div>

＆＃13;

溢出：隐藏不在Transition Scale上工作

1 个答案: