屏幕重新调整大小时，使用父容器进行图像缩放

问题描述

在我的液体布局中，我的 div 元素具有属性 position-fixed 。这意味着，当我重新调整浏览器的大小时，所有元素保持在相同的位置，但缩小或增大。

问题是，当我将图片放入我的 div 元素之一中时，它不会缩放以适合我的 div 元素，因此图片'泄漏'出它的 div 容器。

我需要的是：我的 div 元素和/或图像上的属性，以便图像保持与 div 容器，当页面重新调整大小时，图像也会重新调整大小。这里是我的：

＃div1 {position：fixed;背景颜色：蓝色;宽度：100％;身高：10％;不透明度：.3;}＃div2 {background-color：green;位置：固定;不透明度：.3;左：20％;右：20％;前10名％;身高：40％; width：60％;}＃div3 {background-color：red;不透明度：.3;位置：固定;左：20％;右：20％;顶部：50％;身高：40％; width：60％;}＃div4 {background-color：tan;不透明度：.3;位置：固定;身高：80％;右：80％;宽度：20％; top：10％;}＃div5 {background-color：black;不透明度：.3;位置：固定;身高：80％;宽度：20％;左：80％; top：10％;}＃div6 {background-color：purple;不透明度：.3;位置：固定;顶部：90％;宽度：100％; height：10％;} img {} < div ID = DIV1 > < p> div1< / p>< / div>< div id =div2> <图> < img class =picturessrc =assets / me.jpg/> < figcaption>这是一张图片。 < / figcaption> < / figure>< / div>< div id =div3> <报头GT; < h1>介绍我< / h1> < /报头> < p为H. DIV3< / p为H. < p>您好eveyrone我是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>

解决方案

make image background-image：url（.. img）;

并在同一div上应用 background-size：cover; 。

这里的关键是cover属性值因为它告诉浏览器调整图像大小，同时保持纵横比适合各方。

@Sphinxxx建议使用 background-size：contains; code>解决了OP问题;`


In my liquid layout, my div elements have the property position-fixed. This means that as I re-size the browser, all the elements remain in the same position but have shrunk or increased in size.

The problem is when I place a picture in one of my div elements, it does not scale to fit in my div element, therefore the image 'leaks' out of its div container.

What I need: a property on my div element and/or image so that the image stays the same size as the div container and when the page is re-sized, the image re-sizes as well. Here's 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>

解决方案

make image background-image: url(..img);

and apply background-size: cover; on the same div.

The key here is cover property value as it tells browser to resize image while keeping aspect ratio to fit all sides.

@Sphinxxx suggested to use background-size: contain; which solved OP problem;`

这篇关于屏幕重新调整大小时，使用父容器进行图像缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！