首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何更改由css放置在div中的绝对定位图像的宽度和高度

如何更改由css放置在div中的绝对定位图像的宽度和高度
EN

Stack Overflow用户
提问于 2014-04-21 12:37:33
回答 2查看 1.2K关注 0票数 6

我正在尝试使用css:css和position:absolute在div中放置一个图像;该div中已经有一个图像。为什么我不能控制绝对定位图像的高度或宽度?

css:

代码语言:javascript
运行
AI代码解释
复制
div:before{
    content:url('buble.png');
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:auto;
    z-index:200;
}

html:

代码语言:javascript
运行
AI代码解释
复制
<div><img src="profile_pic.png" alt="" /></div>
EN

回答 2

Stack Overflow用户

发布于 2014-04-21 12:52:10

说明:

如果将其放在:before伪元素的内容中,将无法将Css属性应用于图像。您设置的width/height仅适用于伪元素,而不适用于其内容。

解决方案:

将图像设置为:before伪元素的背景。然后,您可以使用background-size属性根据需要调整图像的大小。

正如background-size规范中所解释的,您可以使用百分比或cover/contain之类的值来调整图像的大小。您还可以使用background-position对图像进行水平/垂直居中定位。

CSS:

代码语言:javascript
运行
AI代码解释
复制
div {position:relative;width:350px;}
div:before{
    content:"";
    position:absolute;
    background-image : url('buble.png');
    background-size:contain;
    width:100%;
    height:100%;
    z-index:200;
}
票数 2
EN

Stack Overflow用户

发布于 2014-04-21 12:54:48

You cannot change the dimensions of the image when inserted this way。正如其他人所提到的,您可以在生成的内容上使用background-image

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23197607

复制
相关文章
css中绝对定位_绝对定位和相对定位怎么用
bottom属性描述时,以首屏页面左下角为参考点 如果浏览器不动,滚动条动的时候,红色盒子跟随页面动,红绿盒子间距不变。
全栈程序员站长
2022/11/17
2.6K0
css中绝对定位_绝对定位和相对定位怎么用
关于Div的宽度与高度的100%设定
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题!
bear_fish
2018/09/19
3.9K0
CSS 定位布局 - 绝对、固定定位设置居中悬浮div
在上一篇 CSS 定位布局 - 相对、绝对、固定三种定位 中,发现当使用定位布局的时候,存在一个无法使用margin居中的方法。
Devops海洋的渔夫
2019/05/31
3.4K0
如何在onCreate中获取View的高度和宽度
在开发过程中经常需要获取到View的宽和高,可以通过View.getWidth()和View.getHeight()来得到宽高。然而新手们经常在onCreate方法中直接调用上面两个方法得到的值是0!
阳仔
2019/07/31
5.4K0
css div高度设置100%如何生效!
然后他发现这个<div>高度永远是 0,哪怕其父级<body>塞满了内容也是如此。事实上,他需
用户6921669
2020/02/01
5.9K0
JavaScript 获取屏幕的高度和宽度
screen.availHeight:显示浏览器的屏幕的可用高度(这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。)
aehyok
2018/09/11
7.3K0
JavaScript  获取屏幕的高度和宽度
css绝对定位与相对定位结合使用_css定位方法
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。—(w3cSchool)
全栈程序员站长
2022/11/16
1.2K0
div在div中垂直居中水平居中(css如何让div水平居中)
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法
全栈程序员站长
2022/08/01
15.1K0
div在div中垂直居中水平居中(css如何让div水平居中)
纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安卓4.4的版本的手机上,自带的浏览器是不支持这个属性的.
FungLeo
2022/05/05
1.3K0
纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
JavaScript获取高度和宽度
屏幕分辨率为:screen.width screen.height 屏幕可用大小:screen.availWidth screen.availHeight 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽(包括边线的宽):document.body.offsetWidth 网页可见区域高(包括边线的宽):document.body.offsetHeight 网页正文全文宽:document.b
苦咖啡
2018/05/07
3.8K0
绝对定位多个字居中显示的css
在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定位并加一个宽度,内层div居中 .box03 .percent { position: absolute; right: 31%; top: 12%; width: 100px; font-family: arial;
蓓蕾心晴
2018/04/12
1.6K0
在可编辑div中定位光标和设置光标
当我们去点击一个输入框的时候,就会产生一个选中对象 selection,就是我们可以看到的文字变成蓝色的那个区域,selection在火狐浏览器可以直接用 window.getSelection()获取,在HTML里面,selection只有一个的,并且selection是一个区域,你可以想象成一个长方形,它是有开始和结束的。
越陌度阡
2020/11/26
9.5K0
【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )
将布局中的 三个 链接图片 , 放置在 单独的 <div> 标签中 , 每个 <div> 标签中放置一个 <a> 链接标签 , 在 <a> 链接标签中包裹一个 <img> 图片 ;
韩曙亮
2023/05/04
3.6K0
【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )
css绝对定位的参照物是什么_css 清除上定位
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/18
6880
css绝对定位的参照物是什么_css 清除上定位
【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 )
如果 绝对定位 的元素 的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素 , 直到浏览器 ;
韩曙亮
2023/04/16
9800
【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 )
前端系列第3集-如何理解css盒子型?
CSS盒子模型是一种设计网页布局的概念,它将每个HTML元素表示为一个盒子,该盒子由内容、内边距、边框和外边距组成,这些部分共同构成了一个完整的盒子模型。
达达前端
2023/10/08
2850
前端系列第3集-如何理解css盒子型?
OC中获取一串字符串的高度(宽度确定)或宽度(高度确定)
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/52937475
用户1451823
2018/09/13
2.6K0
JavaScript、Jquery获取屏幕的宽度和高度
在日常的项目中经常需要获取屏幕的宽度或者高度,简单记录一下: Javascript方法获取: document.body.clientWidth //网页可见区域宽 document.body.clientHeight //网页可见区域高 document.body.offsetWidth //网页可见区域宽(包括边线的宽) document.body.offsetHeight //网页可见区域高(包括边线的高) document.body.scrollWidth //网页正文全文宽 document.b
德顺
2019/11/13
5.3K0
【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )
在调试模式下 , 该父容器的尺寸为 390 x 44 像素 , 该父容器的高度是 44 像素 ;
韩曙亮
2023/05/03
2K0
【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )
点击加载更多

相似问题

CSS绝对定位div高度

31

IE中的绝对定位div宽度/高度(所有版本)

30

100%高度和宽度Div“绝对定位”吃掉我的页脚?

10

绝对定位图像的div 100%高度

15

绝对定位div的宽度

22
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文