Question

我正在为我的网站制作旋转木马 - 画廊浏览器，我对其中的元素有疑问。底部的图像溢出，但仅在左侧。我已将overflow属性设置为隐藏，但它似乎在这方面不起作用。此外，由于某种原因，图像不受属性边距权限的影响，仅剩余边距。

以下是图片浏览器的演示：http://codepen.io/anon/pen/XbgdWo

这是我用于图像项目的代码。我使用margin-right来表明它无法正常工作。

.slider-item img {
width: 100%;
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
@include transition('all .2s ease-in-out'); }

.slider-item:hover {
img { @include transform(scale(1.1)); } }

如果你能看一下，我真的很感激。我不知道如何解决它。

提前致谢。

Answer 1

你的身体有80％的宽度。

首先，将以下CSS添加到正文中以使其正确显示。

＆＃13;

body {
  width: 80%;
  margin: 0 auto;
  }

＆＃13;

Answer 2

您不需要在图片本身上拥有overflow:hidden，只需要包含元素 - 您拥有。

你之后的效果很好，你只是遇到margin的问题 - 你应该把它放在img上，但它应该放在父（.slick-slide）上。

我已经分配了你的codepen here并修复了问题，我在img容器中添加了一个红色背景，这样你就可以看到更改，代码仍然很混乱，但它完成了工作。我将继续在同一支笔中改进代码。

图库图像溢出到左侧

2 个答案: