【发布时间】：2021-04-07 19:06:49
【问题描述】：
我正在尝试为我的电子商务网站创建一个图片库。
一旦您将鼠标悬停在图像上并在移动设备上单击，我就会尝试在缩放中进行编码。我已经在一定程度上实现了这一点，但我似乎无法阻止图像从彼此的顶部和底部重叠。
这是一个示例 https://w3bits.com/labs/css-image-hover-zoom/ 我正在尝试让列中的所有图像进行缩放，并使其与网页上显示的基本示例中的一样。
我尝试过应用 Over-Flow:Hidden 在样式中的各种组合。
有人可以帮忙吗？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
}
.row {
display: -ms-flexbox; /* IE 10 */
display: flex;
-ms-flex-wrap: wrap; /* IE 10 */
flex-wrap: wrap;
padding: 0 4px;
overflow: hidden;
}
/* Create two equal columns that sits next to each other */
.column {
height:100%;
-ms-flex: 50%; /* IE 10 */
flex: 50%;
padding: 0 4px;
overflow: hidden;
}
.column img {
margin-top: 8px;
vertical-align: middle;
transition: transform .5s ease;
}
.column img:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
<img src="" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:70%">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:70%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
</div>
<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");
// Declare a loop variable
var i;
// Two images side by side
function two() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "50%"; // IE10
elements[i].style.flex = "50%";
}
}
</script>
</body>
</html>【问题讨论】：
-
overflow: hidden在父元素上防止其子元素超出 其 边界。这意味着您当前仅防止图像与其父列重叠。尝试将每个图像放入自己的div，并在 div 上应用overflow: hidden:)