html - 绝对定位元素的溢出属性

标签 html css

如何设置绝对定位元素的 overflow: hidden 属性。我知道设置绝对位置会使元素不在文档流中。这是我的代码。很长时间以来,我一直在尝试为 img 元素设置 overflow: hidden。请帮助我。

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div>
<img src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg"/>
</div>
</body>
</html>

CSS

body {
margin: 0;

}
div {
width: 100%;
overflow: hidden;
}

img {
position: absolute;
height: 100%;
clip: rect(0px, 678px, 600px, 0px)
}

最佳答案

您好,当您设置 position: absolute您需要将他的相对 parent 设置为。所以在你的代码中,相对父级是 <body> .如果你设置你的 div

div {
  position:relative; 
}

然后它成为相对父级,因此您的 img 将与此容器相关联地显示。另外,要使其正常工作,您可能需要设置固定高度。

检查这个http://jsfiddle.net/WHq8U/33/

关于html - 绝对定位元素的溢出属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19523138/

相关文章:

javascript - 是否自动为 children 清理 div 上的内存?

javascript - 不可读的 .js 文件?如何转换回来?

javascript - Grunt Compass 开发和生产

html - 中型和大型设备上为 2 x 2 矩阵,小型设备上为 4 x 1 矩阵

html - ie7占用额外空间

html - 当尺寸缩小到手机时图片消失

java - 我们如何在 Thymeleaf 条件运算符中获取 java 对象值( url )?

css - 在 Bootstrap 导航栏中使元素拉伸(stretch)全宽

javascript - 将鼠标悬停在图表的不同部分时显示文本

html - 视频 div 和文本 div 之间的空白