Изображение вылазит за блок?

Question

[Egorian]

<div id="about">
    <img src="img/face.png" alt="" id="ltd">
<div id="about_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ligula augue, tempus rutrum rhoncus in, mattis vel metus. Aliquam at neque neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque dapibus ipsum quis massa vestibulum, non malesuada leo tempor. Sed ac venenatis mauris. Maecenas ultrices est purus, faucibus faucibus ipsum interdum vel. Phasellus sapien urna, venenatis eget lacus a, vestibulum ultrices massa. Duis tristique feugiat leo, at aliquam erat.

Aenean tincidunt dapibus est, sed aliquam nibh fringilla id. Duis neque mi, dignissim sed lacinia vel, laoreet eu nisl. Vivamus iaculis rutrum rutrum. Donec at nibh quis ex pharetra varius sed et arcu. Donec laoreet dignissim leo. Donec pulvinar metus elit, quis molestie nulla luctus et. Aliquam erat est, suscipit nec laoreet maximus, ornare at justo. Pellentesque nec auctor lectus. Ut finibus porttitor nulla. Maecenas id quam eu tellus aliquet vestibulum. Donec ac porta metus.
     </div>   
 </div>

#about_text{
    width: 45vw;
    
    font-family: "Robo Thin",arial;
margin-left: 5vw;
    margin-top: 2vh;
    font-size: 3.3vmin;
}
#ltd{
    float: right;
   
}
#about{}

Как сделать, чтобы картинка не вылазила за блок about и занимала всю, свободную от текста, ширину?
Ссылка

Comments

[JimmDiGreez]

так about не закрыт

[Egorian]

JimmDiGreez, а как закрыть?

[JimmDiGreez]

Egorian,</div>
Я так понимаю перед about_text.

[Илья Хребет]

Egorian,

<div id="about">
    <img src="img/face.png" alt="" id="ltd">
<div id="about_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ligula augue, tempus rutrum rhoncus in, mattis vel metus. Aliquam at neque neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque dapibus ipsum quis massa vestibulum, non malesuada leo tempor. Sed ac venenatis mauris. Maecenas ultrices est purus, faucibus faucibus ipsum interdum vel. Phasellus sapien urna, venenatis eget lacus a, vestibulum ultrices massa. Duis tristique feugiat leo, at aliquam erat.

Aenean tincidunt dapibus est, sed aliquam nibh fringilla id. Duis neque mi, dignissim sed lacinia vel, laoreet eu nisl. Vivamus iaculis rutrum rutrum. Donec at nibh quis ex pharetra varius sed et arcu. Donec laoreet dignissim leo. Donec pulvinar metus elit, quis molestie nulla luctus et. Aliquam erat est, suscipit nec laoreet maximus, ornare at justo. Pellentesque nec auctor lectus. Ut finibus porttitor nulla. Maecenas id quam eu tellus aliquet vestibulum. Donec ac porta metus.
     </div>
</div>

[Egorian]

JimmDiGreez, Илья Хребет, я закрыл, просто неправильно скопировал. Уже поправил

[Максим Тимофеев]

Почему не оформить код нормально? Выкинуть в песочницу, что бы можно было зайти и помочь Вам за 2-3 минуты. А так - лень, честно. И не только мне. Помощь же Вам нужна, ну так сделайте так, что бы ее было максимально удобно оказать.

[Egorian]

Максим Тимофеев, Прошу прощения. Ссылка была, но текста в ней не было.

[Василий Варюхин]

Опишите, пожалуйста, подробнее. Как должно быть?

[Egorian]

Василий Варюхин, чтобы картинка не вылазила за блок about и занимала всю, свободную от текста, ширину и находилась справа. Чтобы не вылезала, по высоте, за текст

Answer 1

[Localhost]

например
#about{
max-width:200px;
}

#about img{
width:100%;
}

Answer 2

[Максим Тимофеев]

Egorian, А как она и по ширине будет масштабироваться и по высоте одновременно при этом не потеряв aspectRatio?
https://codepen.io/wokster/pen/odeojE?editors=1100
Возможно не верно Вас понял, можете попробовать разные background-size (cover, contain)