gpt4 book ai didi

html - 对象适合 : contain 的图像圆 Angular 问题

转载 作者:行者123 更新时间:2023-11-28 02:32:47 24 4
gpt4 key购买 nike

我想显示一张带有圆 Angular 的图片。因此图像必须拉伸(stretch)到容器但不裁剪任何部分,如 object-fit: contain。但是,border-radius 适用于图像元素,而不是图片内容。这是一个示例(也是 JSFiddle ):

body {
width: 100vw;
height: 100vh;
margin: 0;
}

div {
width: 100%;
height: 100%;
}

img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 20%;
}
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
</div>

您可以在调整视口(viewport)大小时检查它是如何工作的。

那么,有没有办法让图像元素在两个方向 调整其边框大小以适应容器,就像object-fit 一样?

或者可能是一种在图像内容上应用“按圆 Angular 矩形裁剪过滤器”的方法?

最佳答案

我也遇到过这个问题,我找到了解决办法。如果将高度和宽度设置为自动,则 img 元素会保持其纵横比并且图像会触及边框。然后,您可以使用最大宽度和最大高度来代替宽度和高度。

img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 20%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

您可能还必须像现在一样将 img 置于父 div 的中心,如果它小于最大尺寸,它将移至左上角。

关于html - 对象适合 : contain 的图像圆 Angular 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49567069/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com