根據內容展開圖像

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>