盒子中的自行车零件没有在一个地方固定-HTML CSS

发布于 01-23 03:32 字数 1834 浏览 1 评论 0原文

根据客户需求,我正在使用Visual Products Configurator。该产品是自行车,分为4个部分。

  1. 自行车主体
  2. 前轮
  3. 后轮
  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.

  1. Bike body
  2. Front wheel
  3. Back wheel
  4. 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

向地狱狂奔2025-01-30 03:32:22

使用一个具有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

雄赳赳气昂昂2025-01-30 03:32:22

您还可以使用保证金最低,边缘权利,边缘左,边缘顶部来更改其位置

You can Also use the margin-bottom, margin-right, margin-left, margin-top to change the position of it

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文