Geek Answers Handbook

Zoom to parent container when screen is resized

In my liquid layout, the elements divhave a property position-fixed. This means that when you resize the browser, all elements remain in the same position, but decrease or increase.

The problem is when I put the image in one of my elements div, it does not scale for my element div, so the image "flows" from its container div.

What I need: a property on the element and / or image divso that the image remains the same size as the container div, and when the page is resized, the image will also resize. Here is what I have:

#div1 {
  position: fixed;
  background-color: blue;
  width: 100%;
  height: 10%;
  opacity: .3;
}

#div2 {
  background-color: green;
  position: fixed;
  opacity: .3;
  left: 20%;
  right: 20%;
  top: 10%;
  height: 40%;
  width: 60%;
}

#div3 {
  background-color: red;
  opacity: .3;
  position: fixed;
  left: 20%;
  right: 20%;
  top: 50%;
  height: 40%;
  width: 60%;
}

#div4 {
  background-color: tan;
  opacity: .3;
  position: fixed;
  height: 80%;
  right: 80%;
  width: 20%;
  top: 10%;
}

#div5 {
  background-color: black;
  opacity: .3;
  position: fixed;
  height: 80%;
  width: 20%;
  left: 80%;
  top: 10%;
}

#div6 {
  background-color: purple;
  opacity: .3;
  position: fixed;
  top: 90%;
  width: 100%;
  height: 10%;
}

img {}
<div id="div1">
  <p>div1</p>
</div>
<div id="div2">
  <figure>
    <img class="pictures" src="assets/me.jpg" />
    <figcaption>
      This is a picture.
    </figcaption>
  </figure>

</div>
<div id="div3">
  <header>
    <h1>Introducing Me</h1>
  </header>
  <p>div3</p>
  <p>Hello eveyrone i am adan ramirez</p>
</div>

<div id="div4">
  <p>div4</p>
</div>
<div id="div5">
  <p>div5</p>
</div>
<div id="div6">
  <p>div6</p>
</div>
Run codeHide result
+4
4

background-image: url(..img);

background-size: cover; div.

, , .

@Sphinxxx background-size: contain;, OP, `

+3

:

img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

object-fit - CSS3.

contain .

CSS-Tricks :

object-fit , . , object-position. object-fit , .

- , polyfill, IE9: Polyfill CSS

:

+3

:

img {
    width: 100%;
}
0

Try:

img {
  max-width: 100%; 
  max-height: 100%;
}
figure {
  height: 100%;
  width: 100%;
  margin: 0;
}

- , . , , , div. , , div.

max- *, , , .

0

More articles:


All Articles