div 内的边界 box/boxes
Bounding box/boxes inside a div
我正在开发人脸识别网络应用程序,但在尝试 "fix" 图像上的边界框使其响应时遇到了一些问题。如果屏幕是全尺寸的,那是(正确的)结果:
但是,一旦我尝试调整 window 浏览器的大小,使其变小,框就会失去它的位置,如下所示:
.image-container {
position: relative;
display: inline-block;
img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
}
.box {
display: flex;
flex-wrap: wrap;
justify-content: center;
position: absolute;
border: 2px solid red;
}
<div>
{this.setRecognitionType()}
<div className={styles["image-container"]}>
{this.state.box ? (
<div
className={styles.box}
style={{
top: this.state.box.top,
right: this.state.box.right,
bottom: this.state.box.bottom,
left: this.state.box.left
}}
/>
) : null}
<img id="image" src={this.props.imageUrl} alt="" />
</div>
</div>
编辑
本例中 Box 的属性:
top: 192px;
right: 85px;
bottom: 118px;
left: 92px;
编辑:解决方案
正如已经回答的那样,唯一的方法似乎是使用百分比而不是像素。
我整理的方式:
left: (coords.left / imageWidth) * 100,
top: (coords.top / imageHeight) * 100,
right: ((width - coords.right) / imageWidth) * 100,
bottom: ((height - coords.bottom) / imageHeight) * 100
"imageHeight" 和 "imageWidth" 是原始图片的大小,coords 是以像素为单位的坐标。
您的代码没有产生预期的效果,因为您使用静态单位定位框。随着图片变小,框将始终距离顶部 192px,距离右侧 85px,等等。尝试使用百分比单位代替,类似于此(显然玩数字直到看起来正确):
top: 30%;
right: 5%;
left: 5%;
bottom: 15%;
我正在开发人脸识别网络应用程序,但在尝试 "fix" 图像上的边界框使其响应时遇到了一些问题。如果屏幕是全尺寸的,那是(正确的)结果:
但是,一旦我尝试调整 window 浏览器的大小,使其变小,框就会失去它的位置,如下所示:
.image-container {
position: relative;
display: inline-block;
img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
}
.box {
display: flex;
flex-wrap: wrap;
justify-content: center;
position: absolute;
border: 2px solid red;
}
<div>
{this.setRecognitionType()}
<div className={styles["image-container"]}>
{this.state.box ? (
<div
className={styles.box}
style={{
top: this.state.box.top,
right: this.state.box.right,
bottom: this.state.box.bottom,
left: this.state.box.left
}}
/>
) : null}
<img id="image" src={this.props.imageUrl} alt="" />
</div>
</div>
编辑 本例中 Box 的属性:
top: 192px;
right: 85px;
bottom: 118px;
left: 92px;
编辑:解决方案 正如已经回答的那样,唯一的方法似乎是使用百分比而不是像素。
我整理的方式:
left: (coords.left / imageWidth) * 100,
top: (coords.top / imageHeight) * 100,
right: ((width - coords.right) / imageWidth) * 100,
bottom: ((height - coords.bottom) / imageHeight) * 100
"imageHeight" 和 "imageWidth" 是原始图片的大小,coords 是以像素为单位的坐标。
您的代码没有产生预期的效果,因为您使用静态单位定位框。随着图片变小,框将始终距离顶部 192px,距离右侧 85px,等等。尝试使用百分比单位代替,类似于此(显然玩数字直到看起来正确):
top: 30%;
right: 5%;
left: 5%;
bottom: 15%;