图库图像溢出到左边

Gallery images overflow to left

本文关键字：左边 溢出 图像      更新时间：2023-09-26

我正在为我的网站制作一个旋转木马画廊查看器，我对其中的元素有问题。底部的图像是溢出的，但只在左边。我已经将溢出属性设置为隐藏，但它似乎在这方面不起作用。此外，由于某些原因，这些图像不受margin-right属性的影响，只受margin- left的影响。

下面是一个图像查看器的演示: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)); } }
如果你能看一下，我将非常感激。我不知道该怎么修理它。

您不需要在图像本身上设置overflow:hidden，只需要包含元素-您已经有了。

你工作后的效果很好，你只是有一个问题与margin -你已经把它放在img上，当它应该，但在父母(.slick-slide)。

我已经在这里分叉了你的codepen并修复了这个问题，我给img容器添加了一个红色的背景，这样你就可以看到这些变化，代码仍然很乱，但它完成了工作。我将以同样的笔法继续完善代码。

你的身体有80%的宽度。

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

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

相关文章：