如何在重新调整屏幕大小时使图像与父div元素缩放 [英] How to enable image to scale with parent div element when re-sizing screen
问题描述
在我的流程布局中，我的 div 元素具有属性： position-fixed 这意味着当我调整浏览器的大小，所有的元素保持在相同的位置，但缩小或增加的大小。
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.
问题是当我在一个 div 元素中放置图片时，我的 div 元素，因此图像泄漏出其 div 容器。
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.
我需要：在 div 元素和/或图像上的属性，使图像保持与 div 容器，当页面调整大小时，图像也会重新调整大小。这是我的：
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:
<body>
<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>
</body>
#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
{
}
推荐答案
make image background-image：url（.. img）;
make image background-image: url(..img);
并在同一个div上应用 background-size：cover; 。
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建议使用 background-size：contains; 解决了OP问题;`
@Sphinxxx suggested to use background-size: contain; which solved OP problem;`
这篇关于如何在重新调整屏幕大小时使图像与父div元素缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
