0

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

如何防止照片溢出相框？

样式.css

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

照片.html

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

3 回答 3

2

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

您设置了overflow-yon .photoFrame，但代码中的图像标签位于.photoframediv 之外。

尝试将其更改为：

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

我也<img>正确关闭了你的标签。您不使用</img>关闭图像标签。

于 2013-03-13T19:28:58.377 回答
1

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

于 2013-03-13T20:18:10.487 回答
1

两件事，一，你只是在相框 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 的边距）
如果您想要大于框架大小的图像的滚动条，请使用溢出：滚动。如果您不希望图像缩放，而不是设置 .bookPhoto 的宽度和高度，请使用剪辑矩形：

.bookPhoto {
   clip( 0px, 113px, 110px, 0px);
   margin: 0 5px;
}
于 2013-03-13T20:27:17.127 回答