我有一张图片，它应该随着内容的扩展而扩展。请建议我更好的解决方案。
.start-a-business-our-commitment-section {
background-position: center left;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
position: relative;
}
.start-a-business-our-commitment-section .bottom-image {
position: relative;
height: 225px;
width: 100%;
background-position: center;
background-size: cover;
color: #fff;
font: 13px/1.5em "Effra",Helvetica,Arial,sans-serif;
}
.start-a-business-our-commitment-section img {
background-position: center left;
background-repeat: no-repeat;
background-size: cover;
height: 230px;
width: 100%;
object-fit: cover;
}
.start-a-business-our-commitment-ribbon {
height: 125px;
position: absolute;
top: 40px;
width: 100%;
}
.start-a-business-our-commitment-ribbon-text {
margin: 0 auto;
padding: 0;
width: calc(100% - 60px);
max-width: 970px;
}
.start-a-business-our-commitment-section .heading {
font-family: "Nexa",Helvetica,Arial,sans-serif;
font-size: 25px;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
}
.start-a-business-our-commitment-section p {
color: #fff;
font-family: "Effra",Helvetica,Arial,sans-serif;
font-size: 15px;
margin: 0;
padding-top: 15px;
}<div class="start-a-business-our-commitment-section">
<div class="bottom-image">
<img class="pic" src="http://qa-kentico-wv.wvhtest.com/getmedia/570851ce-5a5e-413a-95ad-e0d0e2460973/our-commitment-bg.jpg.aspx?width=2521&height=1716&ext=.jpg">
<div class="start-a-business-our-commitment-ribbon">
<div class="start-a-business-our-commitment-ribbon-text">
<p class="heading"><!-- BEGIN ::startabusinessOurCommitmentHeading -->Our Commitment<!-- END ::startabusinessOurCommitmentHeading --></p>
<p>From the moment you join our global family, you enter a circle of trust and transparency. We are committed to your success, and we are continuously developing marketing and training tools to help you on your journey. Without you, none of this would be possible. Your voice is important. As you explore the path you are on, we’re here to support you every step of the way.
From the moment you join our global family, you enter a circle of trust and transparency. We are committed to your success, and we are continuously developing marketing and training tools to help you on your journey. Without you, none of this would be possible. Your voice is important. As you explore the path you are on, we’re here to support you every step of the way.
From the moment you join our global family, you enter a circle of trust and transparency. We are committed to your success, and we are continuously developing marketing and training tools to help you on your journey. Without you, none of this would be possible. Your voice is important. As you explore the path you are on, we’re here to support you every step of the way
From the moment you join our global family, you enter a circle of trust and transparency. We are committed to your success, and we are continuously developing marketing and training tools to help you on your journey. Without you, none of this would be possible. Your voice is important. As you explore the path you are on, we’re here to support you every step of the way
</p>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
它与background-image一起使用。以下是一个示例代码段。您正在使用具有固定px的高度问题。使用height:auto或height:100%
div {
background-image: url('http://qa-kentico-wv.wvhtest.com/getmedia/570851ce-5a5e-413a-95ad-e0d0e2460973/our-commitment-bg.jpg.aspx?width=2521&height=1716&ext=.jpg');
height: 100%;
max-width: 800px;
background-size: cover;
}<div>
From the moment you join our global family, you enter a circle of trust and transparency. We are committed to your success, and we are continuously developing marketing and training tools to help you on your journey. Without you, none of this would be
possible. Your voice is important. As you explore the path you are on, we’re here to support you every step of the way. From the moment you join our global family, you enter a circle of trust and transparency. We are committed to your success, and we
are continuously developing marketing and training tools to help you on your journey. Without you, none of this would be possible. Your voice is important. As you explore the path you are on, we’re here to support you every step of the way. From the
moment you join our global family, you enter a circle of trust and transparency. We are committed to your success, and we are continuously developing marketing and training tools to help you on your journey. Without you, none of this would be possible.
Your voice is important. As you explore the path you are on, we’re here to support you every step of the way From the moment you join our global familyery step of the way. From the moment you join our global family, you enter a circle of trust and transparency.
We are committed to your success, and we are continuously developing marketing and training tools to help you on your journey. Without you, none of this would be possible. Your voice is important. As you explore the path you are on, we’re here to support
you every step of the way From the moment you join our global family
</div>