bounty将在12小时后过期。此问题的答案可获得+100声望奖励。Maniraj Murugan正在查找规范答案:请帮我做一个有背景图片的子div,背景图片中也包含位置:父div中包含的绝对元素。
我正在做一个应用程序的布局,其中包括左,右部分。
.container {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.leftSection {
flex: 0.7;
background-color: #ccc;
}
.rightSection {
flex: 0.2;
background-color: #ccc;
}
<div class="container">
<div class="leftSection">
Left Section
</div>
<div class="rightSection">
Right Section
</div>
</div>
在这里,.rightSection
div将保持原样,只需查看左侧部分。
左边的部分将有一个背景图像与一些空间,我需要包括子组件图的。
背景图像会像这样,
并且填充子组分的预期结果是,
所以我试着填左边的部分,
一个二个一个一个
到目前为止一切都很好。但我正在实现这在平板电脑屏幕的设备的宽度将从600px
到1400px
开始。
因此,我需要使此部分在宽度从600px
到1400px
的所有设备上都具有响应性。
因此,我分解设置一些宽度的父div考虑它作为设备宽度,如600
,1024
,和1200
(只是为了举例..),我已经使它像这个静态宽度。
.first {
width: 600px;
border: 2px solid #000;
margin: 30px;
}
.second {
width: 1024px;
border: 2px solid #000;
margin: 30px;
}
.third {
width: 1200px;
border: 2px solid #000;
margin: 30px;
}
.container {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.leftSection {
flex: 0.7;
}
.rightSection {
flex: 0.2;
background-color: #ccc;
}
.bgContainer {
background-image: url('https://i.stack.imgur.com/AfygH.png');
height: 401px;
width: 688px;
background-repeat: no-repeat;
position: relative;
margin: 0 auto;
}
.coil {
position: absolute;
top: 49.55%;
left: 24.3%;
}
.evaporator {
position: absolute;
top: 7.25%;
left: 54.5%;
}
.compressor {
position: absolute;
top: 53.15%;
left: 59.2%;
}
<div class="first">
<div class="container">
<div class="leftSection">
<div class="bgContainer">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
</div>
<div class="rightSection">
Right Section
</div>
</div>
</div>
<div class="second">
<div class="container">
<div class="leftSection">
<div class="bgContainer">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
</div>
<div class="rightSection">
Right Section
</div>
</div>
</div>
<div class="third">
<div class="container">
<div class="leftSection">
<div class="bgContainer">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
</div>
<div class="rightSection">
Right Section
</div>
</div>
</div>
在上面的代码片段中,在.first
中,左侧部分出来,在.second
和third
中,左侧部分也在不同的位置。
所以最后我的要求是如何使左部分与背景图像沿着响应所有平板电脑屏幕从600
像素到1400
像素至少.
**在真实的应用中:**现在我的主要问题是设计超出屏幕的大部分是在底部,
我试过使用transform: scale(2.0);
,但是左边的部分仍然超出了屏幕。就像上面的图像,我需要动态计算这个比例值吗?请帮助我解决这个问题,因为我已经挣扎了很长时间。
更新1:
如果我给特定的div给予宽度,
.coil {
position: absolute;
top: 49.55%;
left: 24.3%;
width: 17%;
}
.evaporator {
position: absolute;
top: 7.25%;
left: 54.5%;
width: 12%;
}
.compressor {
position: absolute;
top: 53.15%;
left: 59.2%;
width: 13%;
}
那么当设备高度较小或较大时,我会遇到问题。
实施后,
以下屏幕截图在带有 * 高度的屏幕视口中捕获:844* 和 * 宽度:小行星1280*
以下屏幕截图在带有 * 高度的屏幕视口中捕获:552* 和 * 宽度:小行星10
4条答案
按热度按时间gcxthw6b1#
首先,我们可以将背景图像设置为普通块,使其成为主要的宽度和高度。然后,我们可以将图像的宽度设置为
100%
,并且在背景图像如此的情况下,它将保持其纵横比。既然您手动计算组件的top
,left
位置,为什么不手动计算width
呢?这应该对所有设备都有响应。如果你真的需要的话,你也可以用JavaScript自动计算,但是我修正了这个解决方案,因为你需要手动计算
top
,left
的位置。qjp7pelc2#
也许可以尝试使用background-size为.container类编写以下CSS代码:封面:
szqfcxe23#
ltqd579y4#
在文档SVG* 中使用 *,您可以将SVG用作任何其他常规图像并根据需要调整其大小,同时仍然能够访问组成SVG的HTML并修改其CSS属性。
TL;医生
display: none
*symbol
元素中,并在defs
部分中放入id
。<svg><use href="#the_id"></use></svg>
一起使用改为
因为整个SVG被视为单个图像,所以SVG中的所有元素都将保留在各自的位置并按比例缩放,而不需要任何CSS来定位或调整它们的大小。
这是我为这个片段所做的:
.spec
和.info
中的flex
和min-width
以满足您的要求。<a>
中嵌入了 heating component 图像,以显示您可以在SVG中使用常规HTML标记。flex
值)和min-width: 20rem
(360 px减去左/右间距)强制换行)。*片段