我正在尝试解决一个问题,即我已经按照多个教程来了解如何在容器内生成图像。我做了我觉得我能做的一切,但由于某种原因,图像仍然没有填满方块。
我也尝试使用CSS导入图像并使用背景:cover;属性。
如何使此图像填充左栏,文本保留在右侧?
#about .container {
background-color: #fff;
padding: 0;
height: 300px;
margin: 20px auto;
text-align: center;
box-shadow: 0px 0px 40px -10px rgba(59, 66, 71, 1);
border: 0.5px solid #72A7A3;
}
.about-photo img {
width: 100%;
height: auto;
}

<section id="about">
<div class="container-fluid">
<div class="container col-6">
<div class="row">
<div class="col-5 about-photo">
<img src="img/avatar.jpg" class="img-fluid">
</div>
<div class="col-7 about-text">
<h1>Hi, I'm <span class="text-primary">Oliver Stott</span></h1>
<p>thisi s a test </p>
</div>
</div>
</div>
</div>
</section>
&#13;
答案 0 :(得分:2)
如果您希望图片适合父元素,只需将w-100
类添加到img
。
<section id="about">
<div class="container-fluid">
<div class="container col-6">
<div class="row">
<div class="col-5 about-photo"> <img src="img/avatar.jpg" class="img-fluid w-100">
</div>
<div class="col-7 about-text">
<h1>Hi, I'm
<span class="text-primary">Oliver Stott</span>
</h1>
<p>this is a test </p>
</div>
</div>
</div>
</div>
</section>
答案 1 :(得分:0)
你已经知道了容器的高度,
试试这个
1)如果你不想在调整大小时拉伸图像,
#about .container {
background-color: #fff;
padding: 0;
height: 300px;
margin: 20px auto;
text-align: center;
box-shadow: 0px 0px 40px -10px rgba(59, 66, 71, 1);
border: 0.5px solid #72A7A3;
}
.about-photo .img {
width: 100%;
height: 300px;
background: #eee url('https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
-webkit-background-size: cover;
background-size: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="about">
<div class="container-fluid">
<div class="container col-6">
<div class="row">
<div class="col-5 about-photo">
<!-- <img src="https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img-fluid"> -->
<div class="img"></div>
</div>
<div class="col-7 about-text">
<h1>Hi, I'm <span class="text-primary">Oliver Stott</span></h1>
<p>thisi s a test </p>
</div>
</div>
</div>
</div>
</section>
2)如果拉伸很好,请执行以下操作: 变化
.about-photo img {
height: 100%; // from auto to 100%
}
并添加
#about .container .row{
height: 100%
}
#about .container {
background-color: #fff;
padding: 0;
height: 300px;
margin: 20px auto;
text-align: center;
box-shadow: 0px 0px 40px -10px rgba(59, 66, 71, 1);
border: 0.5px solid #72A7A3;
}
.about-photo img {
width: 100%;
height: 100%;
}
#about .container .row{
height: 100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="about">
<div class="container-fluid">
<div class="container col-6">
<div class="row">
<div class="col-5 about-photo">
<img src="https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img-fluid">
</div>
<div class="col-7 about-text">
<h1>Hi, I'm <span class="text-primary">Oliver Stott</span></h1>
<p>thisi s a test </p>
</div>
</div>
</div>
</div>
</section>
答案 2 :(得分:-1)
这应该有效:
.about-photo
{ background-image : url(img/avatar.jpg);
background-size: cover;
}