Responsive design html css (no js) for container within container - Stack Overflow

admin管理员组

文章数量:1292285

I will explain my case by giing a visual example : On the webapge,

1. there is standard text content before and then
2. in a container (.mainbg-container), a background image of a television set on a desk
3. the secondary container (.secondarybg-container) would be the screen of the television, that I want to stay fixed inside the television, whatever the size. So the top-left corner and the width-height would be always inside the television, whatever the change in the viewport : small or big screen, portrait or landscape.

The idea would be that later, with js, I could change the secondary container background to simulate a change of channel or display some other inside layout. This part is outside the scope of my question.

If possible, i would like to use vanilla css. I am not against framework (bootstrap, tailwind...), but i would like to know if this is possible without them.

In css, i have tried several appoaches : using percentage an vw/vh for units 1) using background-image with background-size: cover; to have defacto responsive background image

:root {
    --secondary-container-left: 5%;
    --secondary-container-top: 6%;
    --secondary-container-width: 69%;
    --secondary-container-height: 56%;
}

.mainbg-container {
    width: 100%;
    height: 100vh;
    background-image: url(".jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
/* Secondary container positioned absolutely relative to mainbg-container */
.secondarybg-container {
    position: absolute;
    left: var(--secondary-container-left);
    top: var(--secondary-container-top);
    width: var(--secondary-container-width);
    height: var(--secondary-container-height);
    background-image: url(".jpg");
    background-color: #4CAF50;
    background-size: cover;
    background-position: center;
    z-index: 1;
    min-width: 300px;
    min-height: 200px;
}

<div id="container">
    <p>Some content before</p>
    <div class="mainbg-container">
        <div class="secondarybg-container">
          Some other content
        </div>
    </div>
  <p>Some content after</p>
</div>

I will explain my case by giing a visual example : On the webapge,

1. there is standard text content before and then
2. in a container (.mainbg-container), a background image of a television set on a desk
3. the secondary container (.secondarybg-container) would be the screen of the television, that I want to stay fixed inside the television, whatever the size. So the top-left corner and the width-height would be always inside the television, whatever the change in the viewport : small or big screen, portrait or landscape.

The idea would be that later, with js, I could change the secondary container background to simulate a change of channel or display some other inside layout. This part is outside the scope of my question.

If possible, i would like to use vanilla css. I am not against framework (bootstrap, tailwind...), but i would like to know if this is possible without them.

In css, i have tried several appoaches : using percentage an vw/vh for units 1) using background-image with background-size: cover; to have defacto responsive background image

:root {
    --secondary-container-left: 5%;
    --secondary-container-top: 6%;
    --secondary-container-width: 69%;
    --secondary-container-height: 56%;
}

.mainbg-container {
    width: 100%;
    height: 100vh;
    background-image: url("https://live.staticflickr/65535/54323668662_22f08bcf75_b.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
/* Secondary container positioned absolutely relative to mainbg-container */
.secondarybg-container {
    position: absolute;
    left: var(--secondary-container-left);
    top: var(--secondary-container-top);
    width: var(--secondary-container-width);
    height: var(--secondary-container-height);
    background-image: url("https://live.staticflickr/65535/54323668672_94ca9f17cb_z.jpg");
    background-color: #4CAF50;
    background-size: cover;
    background-position: center;
    z-index: 1;
    min-width: 300px;
    min-height: 200px;
}

<div id="container">
    <p>Some content before</p>
    <div class="mainbg-container">
        <div class="secondarybg-container">
          Some other content
        </div>
    </div>
  <p>Some content after</p>
</div>

However, in this case, given a image size, the background-image can be bigger than the viewport and so would not be fully visible. Moreover, if you fiddle with the viewport size, the .secondarybg-container does not fit

using background-image with background-size: contain; to have a fully visible image whatever the resize is.

:root {
    --secondary-container-left: 39%;
    --secondary-container-top: 6%;
}

.mainbg-container {
    width: 100%;
    height: 100vh;
    background-image: url("https://live.staticflickr/65535/54323668662_22f08bcf75_b.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    overflow: hidden;
}
/* Secondary container positioned absolutely relative to mainbg-container */
.secondarybg-container {
    position: absolute;
    left: var(--secondary-container-left);
    top: var(--secondary-container-top);
    background-image: url("https://live.staticflickr/65535/54323668672_94ca9f17cb_z.jpg");
    background-color: #4CAF50;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    min-width: 128px;
    min-height: 90px;
}

<div id="container">
    <p>Some content before</p>
    <div class="mainbg-container">
        <div class="secondarybg-container">
          Some other content
        </div>
    </div>
  <p>Some content after</p>
</div>

However, if you fiddle with the viewport size, the .secondarybg-container does not fit

This problem seems somewhat simple problem, given that the responsiveness is a standard now.

• css
• responsive-design

Share Follow edited Feb 13 at 14:42 Paulie_D 115k1313 gold badges165165 silver badges184184 bronze badges asked Feb 13 at 9:41 OverdoseOverdose 58511 gold badge99 silver badges3232 bronze badges 1

• Frameworks just boil down to producing CSS (maybe with a bit of JS) so you can do this with vanilla code. Think about aspect-ratios and using % positioning. – A Haworth Commented Feb 13 at 10:29

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Instead of background in .mainbg-container, use <img> - this will automatically preserve the aspect ratio. And .secondarybg-container should have position: absolute; with a offset in percentage to have the appropriate size:

.mainbg-container {
  display: inline-flex;
  position: relative;
  img {
    max-width: 100%;
  }
}
.secondarybg-container {
  position: absolute;
  inset: 5.4% 26.3% 37.5% 5.6%;
  background: url("https://live.staticflickr/65535/54323668672_94ca9f17cb_z.jpg") center / cover;
  overflow-y: auto;
}

<div id="container">
    <p>Some content before</p>
    <div class="mainbg-container">
        <img src="https://live.staticflickr/65535/54323668662_22f08bcf75_b.jpg" alt="">
        <div class="secondarybg-container">Some other content</div>
    </div>
    <p>Some content after</p>
</div>

Instead of caring about the viewport. Would it be better to care about an aspect ratio, regarding the TV image container?

I have provided an example of this under here, with overflow-x:auto on the inner container to make it so that it can have content that "overflows" it. So I have added some wiki article on aspect inside it to show how it works.

I tested different aspect sizes and figured 14/12 where the closest (regarding the image that holds the TV), but you can adjust it even more if you like to.

Have a great day!

:root {
    /* Adjust these values so that they exactly match the TV screen area in your image */
    --secondary-container-left: 5%;
    --secondary-container-top: 6.2%;
    --secondary-container-width: 69%;
    --secondary-container-height: 56%;
  }

  .mainbg-container {
    position: relative;
    width: 100%;
    aspect-ratio: 14 / 12;
    background: url("https://live.staticflickr/65535/54323668662_22f08bcf75_b.jpg")
      center center no-repeat;
    background-size: contain;
  }

  .secondarybg-container {
    position: absolute;
    left: var(--secondary-container-left);
    top: var(--secondary-container-top);
    width: var(--secondary-container-width);
    height: var(--secondary-container-height);
    background: url("https://live.staticflickr/65535/54323668672_94ca9f17cb_z.jpg")
      center center no-repeat, #4CAF50;
    background-size: cover;
    z-index: 1;
    overflow-x:auto;
    font-size:30px;
  }

<div id="container">
    <p>Some content before</p>
    <div class="mainbg-container">
        <div class="secondarybg-container">
          <p>
          The aspect ratio of a geometric shape is the ratio of its sizes in different dimensions. For example, the aspect ratio of a rectangle is the ratio of its longer side to its shorter side—the ratio of width to height,[1][2] when the rectangle is oriented as a "landscape".

The aspect ratio is most often expressed as two integer numbers separated by a colon (x:y), less commonly as a simple or decimal fraction. The values x and y do not represent actual widths and heights but, rather, the proportion between width and height. As an example, 8:5, 16:10, 1.6:1, 8⁄5 and 1.6 are all ways of representing the same aspect ratio.

In objects of more than two dimensions, such as hyperrectangles, the aspect ratio can still be defined as the ratio of the longest side to the shortest side.
          </p>
        </div>
    </div>
  <p>Some content after</p>
</div>

本文标签： Responsive design html css (no js) for container within containerStack Overflow