我如何让一个div自动调整到背景的大小,我为它没有设置一个特定的高度(或最低高度)?
当前回答
你可以这样做
<div style="background-image: url(http://your-image.jpg); position:relative;">
<img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>
其他回答
这可能会有帮助,这不是一个确切的背景,但你明白这个简单的想法吗
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
<div>Hello</div>
</div>
我能想到的最好的解决办法是用百分比来指定你的宽度和高度。这将允许您根据显示器大小调整屏幕大小。它更响应式的布局。
举个例子。 你有
<br/>
<div> . //This you set the width percent to %100
<div> //This you set the width percent to any amount . if you put it by 50% , it will be half
</div>
</div>
这是最好的选择,如果你想要一个响应式布局,我不建议浮动,在某些情况下浮动是可以使用的。但在大多数情况下,我们避免使用float,因为当你进行跨浏览器测试时,它会影响很多事情。
希望这对你有所帮助。
如果它是一个单一的预定背景图像,你想要div在不扭曲背景图像的纵横比的情况下进行响应,你可以首先计算图像的纵横比,然后创建一个div,通过以下步骤保持它的纵横比:
假设你想要一个4/1的纵横比,div的宽度是32%:
div {
width: 32%;
padding-bottom: 8%;
}
这是因为填充是根据包含元素的宽度计算的。
这招对我很管用:
background-image: url("/assets/image_complete_path");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
height: 100%;
最近引入的CSS纵横比属性(~2020-2021)是一个很好的方法来做到这一点,没有填充黑客,并支持所有常绿浏览器。
因为我们需要提前知道图像的纵横比,在很多情况下,你可以提前预先确定图像的尺寸比(但并不总是用户生成的内容),你可以硬编码一个单一的风格或内联css在必要的时候。
当宽度指定时,基于提供的比率(如果高度指定,则计算宽度),Aspect-ratio将计算高度。
div { 纵横比:3 / 2;/*公共比例,如800*600px图像*/ 宽度:200 px;/*计算的高度将是133.33px,这是宽度/纵横比*/ 背景:红色;/*因此任何图像出血显示*/ 背景图片:url (https://images.unsplash.com/photo - 1631163190830 - 8770 - a0ad4aa9?ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8&ixlib=rb 1.2.1&auto=format&fit=crop&w=200&q=80”); } < div > < / div >
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?