盒子中的自行车零件没有在一个地方固定-HTML CSS
根据客户需求,我正在使用Visual Products Configurator
。该产品是自行车,分为4个部分。
- 自行车主体
- 前轮
- 后轮
- 座位
我试图将它们固定在一个地方,但是当我降低窗户尺寸(响应能力)时,它会移至另一个地方。我正在使用%
用于宽度,左&正确等等
属性。但这仍然不适合一个地方。
似乎我必须为此进行很多媒体查询吗?
我正在找到一个简短的解决方案,一个更好的解决方案。
代码:
#vpc-preview {
padding: 30px;
position: relative;
}
#vpc-preview img {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
max-width: 100%;
width: 100%;
display: block;
}
#vpc-preview img:first-child {
max-width: calc(100% - 100px);
position: relative;
}
#vpc-preview img:nth-child(2) {
width: 15%;
left: 34%;
top: 39%;
transform: translate(-50%, -50%);
}
#vpc-preview img:nth-child(3) {
width: 25%;
inset: auto auto 5px 7%;
}
#vpc-preview img:last-child {
max-width: 25%;
inset: auto 15% 5px auto;
}
<div id="vpc-preview"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Body.png" style="z-index:1" data-component-id="component-61c5cd5b45c6d"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Seat.png" style="z-index:1" data-component-id="component-61c5cd5b1e09c"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Tire-Front.png" style="z-index:-1" data-component-id="component-61f2bc32489e0"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Tire-Rear.png" style="z-index:-1" data-component-id="component-61f2bc7c570e7"></div>
我被卡住了,不知道如何使其完美,以便它也适用于其他屏幕。请帮我。
I am using Visual Products Configurator
as per client needs. The product is a bike, and it is divided into 4 parts.
- Bike body
- Front wheel
- Back wheel
- Seat
I am trying to fix them in one place, but when I decrease my window size (responsiveness), it moves to another place. I am using %
for width, left & right etc
properties. But it still not fitting in one place.
Seems like i will have to make a lot of media queries for it?
I am finding a short solution, a better solution.
Code:
#vpc-preview {
padding: 30px;
position: relative;
}
#vpc-preview img {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
max-width: 100%;
width: 100%;
display: block;
}
#vpc-preview img:first-child {
max-width: calc(100% - 100px);
position: relative;
}
#vpc-preview img:nth-child(2) {
width: 15%;
left: 34%;
top: 39%;
transform: translate(-50%, -50%);
}
#vpc-preview img:nth-child(3) {
width: 25%;
inset: auto auto 5px 7%;
}
#vpc-preview img:last-child {
max-width: 25%;
inset: auto 15% 5px auto;
}
<div id="vpc-preview"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Body.png" style="z-index:1" data-component-id="component-61c5cd5b45c6d"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Seat.png" style="z-index:1" data-component-id="component-61c5cd5b1e09c"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Tire-Front.png" style="z-index:-1" data-component-id="component-61f2bc32489e0"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Tire-Rear.png" style="z-index:-1" data-component-id="component-61f2bc7c570e7"></div>
I am stuck, don't know how to make it perfect so that it works for other screens too. Please help me.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

使用一个具有4个区域的容器(座椅,Tire1,Tire2,车身)。
从一开始,您所有的照片都应相同。
然后,将区域定位在%中,并且与容器相比,您还将其大小调整为%。
只有百分比,没有像素单元。
或使用帆布
Use one container with 4 areas (seat, tire1, tire2, body).
All your photos should be the same proportion from the start.
Then you position your zones in % and you also adjust their size in % compared to the container.
Only Percent, no Pixel units.
Or use Canvas