如何解决如何在 CSS 中使用“object-fit:contain”并在图像上仍然具有边框半径?
我正在尝试以“灯箱”样式显示图像,以便它填充屏幕上的可用区域,在本例中为页面宽度的 90% 和高度的 70%。
使用 object-fit: contain;
似乎是实现此目的的实际方法,但它不适用于 border-radius
。是否可以在 <img>
上使用 object-fit 并且仍然按预期应用边界半径?
您需要调整浏览器窗口的大小以查看运行以下代码段时会发生什么。我有 same code running in JSFiddle,如下面的视频所示。
解决方法
正如所评论的,设置 max-width
和 max-height
似乎是您需要或期望的:
div {
margin: auto;
width: 90vw;
height: 70vh;
display:grid;
background-color: DeepSkyBlue;
}
img {
max-width: 100%;
max-height: 100%;
margin:auto;/* x,y center if inside a grid or flex box */
object-fit: contain;/* useless by now,img should keep its ratio */
border-radius: 50px;
border-radius: calc( 5vw + 5vh); /* will scale,maybe you find this usefull */
background-color: Crimson;
}
<div>
<img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>
Contain 在这里并没有真正的帮助。
相反,将 img 的最大宽度和高度设置为 100%。系统会将它完全从上到下或从边到边适应,但 img 元素将具有它需要的任何尺寸,因此边框半径可以正常工作。
要使 img 居中,如果这是您想要的,您可以display: flex
父 div 并将项目对齐/对齐到中心。
div {
margin: auto auto;
width: 90vw;
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
background-color: DeepSkyBlue;
}
img {
max-width: 100%;
max-height: 100%;
border-radius: 50px;
background-color: Crimson;
}
<div>
<img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>
使用object-fit: cover;
代替包含
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。