Сохранение изображений внутри ящиков при реагировании

Question

Я пытаюсь сделать свою фотографию в серой коробке, в которой я ее использую. Однако каждый раз, когда я пытаюсь изменить размер браузера, изображение появляется из этой области. Если у кого-то есть идеи. Я хотел добавить Jsfiddle, но поскольку это связано с картинками, оно не появляется и не поможет. Извините за это ... как я могу держать картинку внутри этой коробки, которая действительно поможет. Благодарю.

Вот картина выпуска: -

.imgbox2{ 
 
    width:100%; 
 
    display:block; 
 
    } 
 

 
    #primary{ 
 
\t background-color:#5E5757; 
 
\t color: white; 
 
    } 
 

 
    section{ 
 
    width: 85%; 
 
    margin-left: auto; 
 
    margin-right:auto; 
 
    margin-top: 35px; 
 
    } 
 

 
    img{ 
 
    float: left; 
 
\t margin-right: 10px; 
 
\t margin-left: 10px; 
 
     }

<section> 
 
     
 
     <div id="box"> 
 
    <h1> GCOM 366</h1> 
 
     <section class="clearfix" id="primary"> 
 
     <div class="imgbox2"> 
 
     <img class="adjustable" src="RDesign3.jpg" alt="example web page" width="300" heigh="300" > 
 
     </div> 
 
     <h2> Benefits</h2> 
 
     
 
     <p class="side"> 
 
     1. \t Learn industry standard programs 
 
     <br> 
 
    2. \t Build Portfolio 
 
    <br> 
 
    3. \t Increase collaboration skills 
 
    <br> 
 
    4. Become more creative 
 
    <br> 
 
    5. Understand good layout 
 
    <br> 
 
    6. Feel confident in HTML/CSS 
 
    </p> 
 
     </section>

Answer 1

для того, чтобы изображения отзывчивым, добавьте этот стиль для всех изображений:

img { 
width: 100%; 
display: block; 
} 

И вам даже не нужно плавать, и тогда ничего не будет видно. Просто добавьте левого, правого полей в IMG родительского контейнера, в вашем случае .imgbox2 демо: https://jsfiddle.net/gkaraliunas/n99rj9k9/

Answer 2

добавить width: calc(100% - 20px) в тег изображения

.imgbox2{ 
 
width:100%; 
 
display:block; 
 

 

 
} 
 

 

 
#primary{ 
 
background-color:#5E5757; 
 
color: white; 
 
} 
 

 
section{ 
 

 

 
width: 85%; 
 
margin-left: auto; 
 
margin-right:auto; 
 

 
margin-top: 35px; 
 

 

 

 
} 
 

 
img{ 
 
    float: left; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    width: calc(100% - 20px); 
 
    }

<section> 
 

 
    <div id="box"> 
 
<h1> GCOM 366</h1> 
 
    <section class="clearfix" id="primary"> 
 
    <div class="imgbox2"> 
 
    <img class="adjustable" src="RDesign3.jpg" alt="example web page" width="300" heigh="300" > 
 
    </div> 
 
    <h2> Benefits</h2> 
 

 
    <p class="side"> 
 
    1. Learn industry standard programs 
 
    <br> 
 
2. Build Portfolio 
 
<br> 
 
3. Increase collaboration skills 
 
<br> 
 
4. Become more creative 
 
<br> 
 
5. Understand good layout 
 
<br> 
 
6. Feel confident in HTML/CSS 
 
</p> 
 
    </section>

Answer 3

Сначала удалите ширину инлайн и высота атрибуты вашего изображения:

<img class="adjustable" src="RDesign3.jpg" alt="example web page" width="300" heigh="300" > 

Так его просто:

<img class="adjustable" src="RDesign3.jpg" alt="example web page"> 

Затем в таблице стилей вы можете установить ширину 100%, а максимальная -поперечника 300px ...

.adjustable 
{ 
    width:100%; 
    max-width:300px; 
}