使用CSS自动缩放具有背景的div以适合其父代

bvjxkvbb 于 2023-03-20 发布在其他

关注(0)|答案(4)|浏览(150)

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

css

来源：https://stackoverflow.com/questions/75697429/auto-scale-a-div-with-background-to-fit-into-its-parent-using-css

4条答案

按热度按时间

gcxthw6b1#

首先，我们可以将背景图像设置为普通块，使其成为主要的宽度和高度。然后，我们可以将图像的宽度设置为100%，并且在背景图像如此的情况下，它将保持其纵横比。既然您手动计算组件的top，left位置，为什么不手动计算width呢？

.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-repeat: no-repeat;
  position: relative;
  margin: 0 auto;
}

.bg-img {
  display: block;
  width: 100%;
}

.coil {
  position: absolute;
  top: 49.55%;
  left: 24.3%;
  width: 17.4418605%;
}

.evaporator {
  position: absolute;
  top: 7.25%;
  left: 54.5%;
  width: 11.627907%;
}

.compressor {
  position: absolute;
  top: 53.15%;
  left: 59.2%;
  width: 13.0813953%;
}

.component img {
  display: block;
  width: 100%;
}

<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
      <img src="https://i.stack.imgur.com/AfygH.png" class="bg-img" />
      <div class="component coil">
        <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
      </div>
      <div class="component evaporator">
        <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
      </div>
      <div class="component compressor">
        <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
      </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>

这应该对所有设备都有响应。如果你真的需要的话，你也可以用JavaScript自动计算，但是我修正了这个解决方案，因为你需要手动计算top，left的位置。

赞(0）回复(0）举报 2023-03-20

qjp7pelc2#

也许可以尝试使用background-size为.container类编写以下CSS代码：封面：

.container {
  background-image: url('https://i.stack.imgur.com/AfygH.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin: 0 auto;
}

赞(0）回复(0）举报 2023-03-20

szqfcxe23#

<div class="container">
  <div class="leftSection">
    <div class="subContainer">
      <!-- Your subcomponents here -->
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </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>



enter code here

赞(0）回复(0）举报 2023-03-20

ltqd579y4#

在文档SVG* 中使用 *，您可以将SVG用作任何其他常规图像并根据需要调整其大小，同时仍然能够访问组成SVG的HTML并修改其CSS属性。

TL;医生

在文档SVG* 中创建一个display: none *
将外部图像放入symbol元素中，并在defs部分中放入id。
将常规HTML中的符号与<svg><use href="#the_id"></use></svg>一起使用
改为

因为整个SVG被视为单个图像，所以SVG中的所有元素都将保留在各自的位置并按比例缩放，而不需要任何CSS来定位或调整它们的大小。
这是我为这个片段所做的：

使用SVGEdit V7以原始大小（688 x401 px）创建给定图像的SVG。
将SVG作为文档中的SVG添加到HTML中，使其能够以给定的比例688：401拉伸。
使用了一个主Flexbox容器，其中包含SVG和一个文本面板。
定义了一些大小约束，强制Flexbox进行 Package 以获得响应。您可以轻松地修改元素.spec和.info中的flex和min-width以满足您的要求。
在<a>中嵌入了 heating component 图像，以显示您可以在SVG中使用常规HTML标记。
故意将CSS和HTML保持在最低限度。
（本演示使用3：2的面板比率（flex值）和min-width: 20rem（360 px减去左/右间距）强制换行）。*
片段

*   { outline: 1px dashed } /* for debugging */

/* Globals */
*    { box-sizing: border-box }
body { margin: 0; width: 100%; min-height: 100vh }
a    { color: inherit }

/* DEMO */
.container { display: flex; flex-flow: row wrap }
svg        { display: block; width: 100%; height: 100% }

/* Toy with 'flex' and 'min-width' values */
.spec { flex: 3; min-width: min(20rem, 100%); aspect-ratio: 688 / 401 }
.info { flex: 2; min-width: min( 8rem, 100%); align-self: stretch }

.info { padding: 1rem }

<div class="container">
    <div class="spec"><svg><use href="#svg-heating"></use></svg></div>
    <div class="info">
        <h3>Panel</h3>
        <p>Lorem ipsum dolor sit amet, aeterno facilisi accusamus no pri. Per aeque pertinacia eu. Ut eum enim oporteat, eruditi abhorreant ex est, ferri eirmod appellantur ius ex. Per volutpat argumentum eu. Deterruisset consequuntur nam ex, pro ea elit mazim, an graeco facilisi mea.
        <p>Ad quodsi deleniti placerat vel, vis minim dolores no. Volumus partiendo id ius, sit ne habeo utamur inimicus. Vulputate mnesarchum sit no, essent possim ocurreret te has, et pro modo urbanitas. His facilisis honestatis ex.
    </div>
</div>

<!-- hidden, in document SVG -->
<svg style="display: none" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
    <defs>
        <symbol id="svg-heating" viewBox="0 0 688 401">
            <image id="svg_bg" height="401" width="688" x="0" xlink:href="https://i.stack.imgur.com/AfygH.png" y="0" />
            <a href="javascript:void(0)"><image id="svg_coil" height="90"  width="120" x="168" xlink:href="https://i.stack.imgur.com/SKUms.png" y="199"/></a>
            <a href="javascript:void(0)"><image id="svg_evap" height="70"  width="80"  x="375" xlink:href="https://i.stack.imgur.com/spv58.png" y="29" /></a>
            <a href="javascript:void(0)"><image id="svg_comp" height="120" width="90"  x="408" xlink:href="https://i.stack.imgur.com/fzSaH.png" y="213"/></a>
        </symbol>
    </defs>
</svg>

赞(0）回复(0）举报 2023-03-20

我来回答

使用CSS自动缩放具有背景的div以适合其父代

4条答案

相关问题

热门标签

最新问答