html - 隐藏的溢出使 img 下降并被剪裁

标签 html css image

我正在尝试编码 this page .

我不知道如何解决这个问题,但似乎 #bigfoverflow:hidden 使图像下降并被裁剪。如何使 #bigf 中的所有这些 div 很好地适合一条水平线?谢谢。

HTML:

<html>
<head>
<title>Title</title>
<meta name="Description" content="desc">
<meta name="keywords" content="keywords">
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
<link type="text/css" href="style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
</head>

<body>

<div id="wrap">

<div id="top">
    <div class="container">
    <h1>Name</h1>
    </div>
</div> 

<div id="bigf">
<div class="container">
<img src="hydraulik.png" class="hydra">

<div class="sm1">
<div class="textsec">SOMETHING</div>
<div class="textsec">IS SAID HERE</div>
</div>


</div>
</div>

</div>

</body>

</html>

CSS:

* {
margin:0px;
padding:0px;
}

body {
font-family: 'Exo 2', sans-serif;
}

#wrap {
position: relative;
width: 100%;
overflow: hidden;
background: #fff;
}

#top {
height:60px;
}

.container {
width:1160px;
margin:0 auto;
}

#bigf {
height:380px;
background: url(bf.jpg) right no-repeat black;
overflow:hidden;
}

.textsec {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8);
display: inline-block;
color: #FFF;
font-weight: 600;
padding: 10px 25px;
outline: 2px solid rgba(51, 51, 51, 0.2);
text-shadow: 2px 3px 0px #000;
margin: 0px 0px 10px;
float:right;
font-size:26px;
}

.hydra {
margin-left:25px;
float:left;
}

.sm1 {
margin-top:150px;
}

最佳答案

clearfix 添加到 #bigf .container

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

并将该类添加到容器中。

<div class="container cf"></div>

里面有 float 元素,所以我建议你阅读以下内容:What is Clearfix

关于html - 隐藏的溢出使 img 下降并被剪裁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29671224/

相关文章:

html - 托管在 Amazon S3 上的站点不显示 Favicon

Javascript - 在所选元素上仅获取两位小数

javascript - 尝试向 jQuery 选项卡添加缓动效果

html - 如何将 media-breakpoint-up 包含到 Bootstrap 4?

具有不同幻灯片高度的 Jquery Cycle Carousel

html - innerHTML 和改变颜色

javascript - 获取 css 样式以覆盖 asp.net-mvc 中页面的整个高度,页面内有多个局部 View

javascript - 强制重新加载图像并保留 url

java - Android滤镜,改变可绘制颜色

android - 当我单击 gridview 中的任何图像项目时,如何全屏显示图像?