Html 试图防止图像溢出

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

等

我认为您的标记不正确

您在

.photoFrame

上设置了

overflow-y

，但代码中的图像标记却位于

.photoFrame

分区之外

尝试将其更改为：

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

---

我还正确地关闭了您的

标签。您没有使用

关闭图像标记。

我认为您的标记不正确

您在

.photoFrame

上设置了

overflow-y

，但代码中的图像标记却位于

.photoFrame

分区之外

尝试将其更改为：

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

---

我还正确地关闭了您的

标签。您没有使用

关闭图像标记。

据我所知，您永远不会检查，因为您尚未定义

.photoframe

的边界。它应该有一个特定的宽度和高度，我猜两者都是100%。而且你没有为可能也有一些样式的

#photoframe

指定任何内容。

据我所知，你从未检查过，因为你没有为

.photoframe

定义边界。它应该有一个特定的宽度和高度，我猜两者都是100%。另外，您没有为可能也有一些样式的

#photoframe

指定任何内容。

两件事，一件事，您只在photoframe div上设置了overflow-y，因此它将自动向x方向延伸。你也需要处理x方向

此外，如果图像与样式指定的大小不同，设置img元素的高度和宽度将缩放/压缩/扭曲图像。如果这不是您想要的，请尝试“最大高度”和“最大宽度”

尝试这些样式，看看效果是否更好：

.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;
}

---

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

此外，如果图像与样式指定的大小不同，设置img元素的高度和宽度将缩放/压缩/扭曲图像。如果这不是您想要的，请尝试“最大高度”和“最大宽度”

尝试这些样式，看看效果是否更好：

.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;
}

---

为什么图像不在相框元素内？您的图像标签应该是

而不是

语法错误。问题仍然存在。为什么图像不在相框元素内？您的图像标记应该是

而不是

语法错误。问题仍然存在。谢谢你的回答，但我犯了一个语法错误。我在上面修复了它，但问题仍然存在。谢谢你的回答，但我犯了一个语法错误。我在上面修复了它，但问题仍然存在。当然，祝你好运。如果你只想在一个方向上滚动（比如说，垂直滚动），你可以做overflow-y:scroll；溢出x：隐藏。当然，祝你好运。如果你只想在一个方向上滚动（比如说，垂直滚动），你可以做overflow-y:scroll；溢出-x：隐藏。