根据内容展开图像

Question

我有一张图片，它应该随着内容展开而扩展。请提出更好的解决方案。

.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"> 
 
\t <div class="start-a-business-our-commitment-ribbon"> 
 
\t <div class="start-a-business-our-commitment-ribbon-text"> 
 
\t \t <p class="heading"><!-- BEGIN ::startabusinessOurCommitmentHeading -->Our Commitment<!-- END ::startabusinessOurCommitmentHeading --></p> 
 
\t \t <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. 
 
\t \t 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. 
 
\t \t 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 
 
\t \t 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 
 
\t \t </p> 
 
\t </div> 
 
\t </div> 
 
    </div> 
 
</div>

Answer 1

及其与background-image。这里的工作是一个示例snippet.You使用具有固定px高度是problem.Use 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>