html - 试图防止图像溢出

Question

相框包含以 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;
    }

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 class="screenFrame">
   <div id="photoFrame" class="photoFrame">
        <a class="bookInfo" href="#"><img class="bookPhoto" src="mySrc" /></a>
   </div>
</div>

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