Question

相框包含以3x4列显示的图像图像溢出相框，我似乎无法阻止它们我在相框上使用了'溢出'，但我一直得到相同的结果。

如何防止照片溢出相框？

的style.css

.screenFrame {
    width: 350px;
    height: 475px;
    background-color: #FDF6C2;
    margin: 0 auto;
    }
    .photoFrame {
    overflow-y: scroll;
    }
    .bookPhoto {
      width: 100px;
      height: 113px;
      margin: 0 5px;
    }

photos.html

<div class="screenFrame">
   <div id="photoFrame" class="photoFrame">
       <a class="bookInfo" href="#"><img class="bookPhoto" src="mySrc" alt="" /></a>
       etc
   </div>
</div>

Answer 1

我认为你的标记是正确的。

您在overflow-y上设置.photoFrame，但代码中的图片代码位于.photoframe div之外。

尝试将其更改为：

<div class="screenFrame">
   <div id="photoFrame" class="photoFrame">
        <a class="bookInfo" href="#"><img class="bookPhoto" src="mySrc" /></a>
   </div>
</div>

我还正确关闭了您的<img>代码。您不能使用</img>来关闭图片代码。

Answer 2

据我所知，你永远不会过去因为你没有为.photoframe定义边界。它应该有一个特定的宽度和高度，我猜这两者都是100％。此外，您没有为#photoframe指定任何可能也有某些样式的内容。

Answer 3

两件事，一，你只在photoframe div上设置overflow-y，所以它会自动在x方向上延伸。你也需要处理x方向。

此外，设置img元素的高度和宽度将缩放/压缩/扭曲图像（如果它们与样式指定的大小不同）。如果这不是您想要的，请尝试使用max-height和max-width。

尝试这些样式并查看结果是否更好：

.photoFrame {
   overflow:hidden;
   height:  113px;
   width:   120px; 
}
.bookPhoto {
   max-height: 113px;
   max-width: 110px;
   margin: 0 5px;
}

（相框宽度为120而不是110，以说明每边的5px边距）
如果您想要大于帧大小的图像的滚动条，请使用overflow：scroll。如果您不希望图像缩放，而不是为.bookPhoto设置宽度和高度，请使用剪辑矩形：

.bookPhoto {
   clip( 0px, 113px, 110px, 0px);
   margin: 0 5px;
}

试图防止图像溢出

3 个答案: