时间戳

首页 > 解决方案 > 如何使单独 div 中的所有图像停止溢出？

html - 如何使单独 div 中的所有图像停止溢出？

问题描述

我在网页的右上角有一张使用 flexbox 的图片。在鼠标悬停期间，图像溢出到左侧的图像上。我想阻止这种情况。此外，如果有一种方法可以使图像缩小一点。任何建议表示赞赏。

我试过溢出：隐藏，它似乎适用于每个图像，但右上角。

这是一个查看动画的codepen示例https://codepen.io/dev20tx/pen/zXgRQj 

.grid-item-1, .grid-item-2, .grid-item-3, .grid-item-4 {
overflow: hidden;
width: 50%;
height: auto;
z-index: 0;
}

.grid-item-1, .grid-item-2, .grid-item-3, .grid-item-4 img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}

.grid-item-1:hover, .grid-item-2:hover, .grid-item-3:hover, .grid- 
item-4:hover img {
-webkit-transform:scale(1.08); /* Safari and Chrome */
-moz-transform:scale(1.08); /* Firefox */
-ms-transform:scale(1.08); /* IE 9 */
-o-transform:scale(1.08); /* Opera */
 transform:scale(1.08);
}

.work {
 	height: 50vh;
display: flex;
overflow: hidden;
}

.contact {
 	height: 50vh;
display: flex;
overflow: hidden;
align-items: center;
}
 
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
	<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="work">
	<div class="grid-item grid-item-1"><img 
src="https://images.pexels.com/photos/1803024/pexels-photo- 
1803024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></div>
	<div class="grid-item grid-item-2"><img 
src="https://images.pexels.com/photos/1555313/pexels-photo- 
1555313.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></div>
</div>
		
<div class="contact">
	<div class="grid-item grid-item-3"><img 
src="https://images.pexels.com/photos/300857/pexels-photo- 
300857.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></div>
	<div class="grid-item grid-item-4"><img 
src="https://images.pexels.com/photos/2062080/pexels-photo- 
2062080.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></div>
	</div>
</body>
</html>

标签： htmlcss

解决方案

您的图像非常重叠，所以我基本上将图像添加到背景属性中，希望对您有所帮助。

解决方案：

.grid-item {
  overflow: hidden;
  /* [1.2] Hide the overflowing of child elements */
  width: 50vw;
  height: 50%;
  z-index: 0;
}

.grid-item-1 {
  background-image: url('https://images.pexels.com/photos/1803024/pexels-photo-1803024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  transition: all .5s;
}

.grid-item-2 {
  background-image: url('https://images.pexels.com/photos/2062080/pexels-photo-2062080.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  transition: all .5s;
}

.grid-item-3 {
  background-image: url('https://images.pexels.com/photos/1555313/pexels-photo-1555313.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  transition: all .5s;
}

.grid-item-4 {
  background-image: url('https://images.pexels.com/photos/300857/pexels-photo-300857.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  transition: all .5s;
}

.container {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-flow: wrap;
}

.grid-item:hover .grid-item-1,
.grid-item:hover .grid-item-2,
.grid-item:hover .grid-item-3,
.grid-item:hover .grid-item-4 {
  transform: scale(1.2);
}
<div class="container">
  <div class="grid-item">
    <div class="grid-item-1">
    </div>
  </div>
  <div class="grid-item">
    <div class="grid-item-2">
    </div>
  </div>
  <div class="grid-item">
    <div class="grid-item-3">
    </div>
  </div>
  <div class="grid-item">
    <div class="grid-item-4">
    </div>
  </div>
</div>

推荐阅读