Содержимое Div не должно автомасштабировать

Question

Я хочу, чтобы этот контент ".content" в main-div ".box" весы, когда .content ширина такая же, как у .box и не меньше.

.box { 
 
    width: 95%; 
 
    background-color: red; 
 
    padding: 20px; 
 
    text-align: center; 
 
    margin: 55px auto 40px; 
 
} 
 
.content { 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 530px; 
 
    height: 500px; 
 
    padding: 57px 40px 0; 
 
    background-color: #e9e9e9; 
 
    height: 800px; 
 
    box-sizing: border-box; 
 
}

<div class="box"> 
 
    <div class="content"> 
 
    <img src="images/image.png" alt=""> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="js/bootstrap.min.js"></script> 
 
<script src="js/main.js"></script>

Answer 1

Набор width до 100% и добавить min-width: 530px; и ваш .content будет масштабироваться если ширина не меньше, чем.box

.box { 
 
    width: 95%; 
 
    background-color: red; 
 
    padding: 20px; 
 
    text-align: center; 
 
    margin: 55px auto 40px; 
 
} 
 
.content { 
 
    display: inline-block; 
 
    text-align: center; 
 
    min-width: 530px; 
 
    width:100%; 
 
    height: 500px; 
 
    padding: 57px 40px 0; 
 
    background-color: #e9e9e9; 
 
    height: 800px; 
 
    box-sizing: border-box; 
 
}

<div class="box"> 
 
    <div class="content"> 
 
    <img src="images/image.png" alt=""> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="js/bootstrap.min.js"></script> 
 
<script src="js/main.js"></script>