コンテンツに基づいて画像を拡大

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>

background-image

Answer 1

.Hereがsnippet.Youが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>

ある一定 pxと高さを使用しているサンプルでの作業その