Question

我的全宽图像有问题。我有一个分为2：40％和60％的部分。 40％的人有一个图像想要放置图像宽度100％。但看起来我错过了什么。

请注意图像尺寸为2048x1365

以下是代码：

/*Start About me */
.about-me{
	background-color: #f1f1f1;
	overflow: hidden;
}
.about-me .image{
	float: left;
	width: 40%;
}
.about-me .image img{
	width: 100%;
	display: block;

}
.about-me .info{
	float: left;
	width: 60%;
}
.info h1{
	text-transform: uppercase;
	color: #252f31;
	padding-top: 10px;
}
.info p{
	font-size: 14px;
	color: #999;
	line-height: 20px;
}

.about-me .info h1,p{
	padding-left: 40px;
}
.about-me .hobis{
	overflow: hidden;
	margin-left: 40px;
}
.hobis{
	padding-bottom: 20px;

}
.hobis p{
	padding: 0;
	line-height: 20px;
	font-size: 12px;
	float: left;
}
.hobis h3{
	float: left;
	font-size: 16px;
}
.hobis i{
	color: #2dcc70;
	float: left;
	font-size: 30px;
	padding: 15px 20px 0 0;
}
.about-me .hobis > div{
	float: left;
	width: 50%;

}
/*End About me */

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<!-- Start About me section -->
	<div class="about-me">
		<div class="contaner">

			<div class="image">
				<img src="http://i.imgur.com/Cz7ednB.jpg" alt="test">
			</div>
			
			<div class="info">

				<h1>about me </h1>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit Ducimus quo aspernatur veniam obcaecati corporis earum iure error Libero minima laboriosam !</p>

				<div class="hobis">

					<div>
						<i class="fa fa-bug"></i>
						<h3>web design</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cum, doloremque. Officia veritatis, nesciunt obcaecati cum totam ! </p>
					</div>

					<div>
						<i class="fa fa-chrome"></i>
						<h3>web design</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cum, doloremque. Officia veritatis, nesciunt obcaecati cum totam ! </p>
					</div>

					<div>
						<i class="fa fa-css3"></i>
						<h3>web design</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cum, doloremque. Officia veritatis, nesciunt obcaecati cum totam ! </p>
					</div>

					<div>
						<i class="fa fa-gittip"></i>
						<h3>web design</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cum, doloremque. Officia veritatis, nesciunt obcaecati cum totam ! </p>
					</div>

				</div>
			</div>
		
		</div>
	</div>
	<!-- End About me section -->

Answer 1

实现此目的的最佳方法是从标记中删除img，然后通过css3将其添加为容器的背景图像。您还需要添加background-size: cover;，以便占用整个空间（涵盖整个父容器）：

HTML：

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

CSS：

.container {
    background: url('path/to/image.jpg') no-repeat center top / cover;
}

Answer 2

要让图像占据列的整个高度，您可以：

1）使用背景大小的CSS背景图像（支持良好）

此示例使用空白元素来保存图像。它相对于行容器绝对定位。

＆＃13;

.row {
  position: relative;
  overflow: hidden;
}

.details {
  float: left;
  width: 60%;
  margin-left: 40%;
  padding: 20px;
  background-color: #eee;
}

.image {
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background-image: url('http://placehold.it/400x300');
  background-size: cover;
  background-position: center;
}

＆＃13;

<div class="row">
  <div class="image"></div>
  <div class="details">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis lacus tristique tortor congue, ut rhoncus enim lobortis. Ut facilisis, massa eget viverra convallis, velit neque dapibus metus, vitae varius leo risus at quam. Donec et tincidunt odio.</p>
  </div>
</div>

＆＃13;

2）使用CSS content-fit（没有IE浏览器支持）

havung全长img与css的问题

2 个答案: