在我的流式布局中,我的
元素具有position-fixed属性。这意味着当我调整浏览器大小时,所有元素保持在同一位置但缩小或增大尺寸。
问题是当我将图片放入其中一个
问题是当我将图片放入其中一个
元素中时,它不会缩放以适应我的
容器,因此图像会“泄漏”出其
容器。
我需要的是:在我的
我需要的是:在我的
元素和/或图像上设置属性,使图像保持与
容器相同的尺寸,当页面重新调整大小时,图像也会重新调整大小。这就是我的代码片段:
#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>
background-size: contain;
代替,并且可能还需要使用background-position: center;
和background-repeat: no-repeat;
。 - Sphinxxx