html - 如何将图像保存在 div 容器中
问题描述
我正在尝试编辑网站上的图像。我注意到的问题是,当我将显示器缩小到足够小的尺寸时,图像会超出它们“所在”的 div。我怎样才能防止这种情况发生?
我尝试过定位、调整高度/宽度以及更改显示首选项。position: static
防止图像超出 div 容器,但图像现在悬停在 div 底部上方。
.team-member {
background: $color_bg_grey;
min-height: 320px;
width: 100%;
position: relative;
}
.team-member img {
width: 90%;
margin: 0 auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0.9;
}
.team-member.ian {
position: relative;
max-height: 100%;
max-width: 100%;
}
.team-member.ian img {
position: relative;
bottom: 0;
margin: 0;
}
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="team-member ian"><img class="photo_fit"
src="/img/team_photos/Angie.png" alt="Ian">
</div>
<h5>Angie Pope</h5>
<p>Operations</p>
</div>
我希望图像会保留在 div 容器中,但我也看到它
- 让它的顶部离开容器,
- 让它留在容器内,而是在灰色背景的底部上方浮动相当数量的像素。
解决方案
您可以尝试图像上的 object-fit 属性:
.photo_fit {
height: 320px;
object-fit: contain;
}
推荐阅读
- javascript - 使用可选参数表达 app.use 路线
- ios - 字典快速编码
- sql - 比较 SQL 中每 4 周的值
- python - 如何将行标记为标题?
- apache-kafka - 收集和 write_kafka 插件
- batch-file - 如何以固定的时间间隔运行批处理文件中的一段代码,例如 2 小时,然后继续执行剩余的代码?
- azure - 尽管权限正确,但 Azure DevOps Repos 部分不可见
- ios - Xcode 11.2.1 错误:情节提要不可编辑
- postgresql - Spring Boot 2.1.4 + JDBI + HikariCP + PostgreSQL 发生错误后连接未释放到池
- android - 触摸外部时,AlertDialog 不会关闭