0

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

Ссылка на код

#about_text{
    width: 45vw;
     text-decoration: none;
    font-family: "Robo Thin",arial;
margin-left: 5vw;
    margin-top: 2vh;
    font-size: 3.3vmin;
}
#myface{
    float: right;
    height: inherit;
}
#about img{
width:50%;
    height: 100%;
}
 <div id="about">
    <img src="https://static.turbosquid.com/Preview/2014/05/20__03_25_27/002.jpg270ff933-f7cc-4047-9239-b2f122590032Original.jpg" alt="" id="myface">
<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>

2

1 ответ 1

0

Как вариант

#about {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
}
#about figure {
	margin: 0;
	width: 50%;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}
#about_text{
    width: 45vw;
     text-decoration: none;
    font-family: "Robo Thin",arial;
margin-left: 5vw;
    margin-top: 2vh;
    font-size: 3.3vmin;
}
<div id="about">
		<figure style="background-image: url('https://static.turbosquid.com/Preview/2014/05/20__03_25_27/002.jpg270ff933-f7cc-4047-9239-b2f122590032Original.jpg');"></figure>
   
<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.
<br>
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>

Если использовать img, то он будет всегда растягивать родительский блок.

2
  • Но у меня к img применен float и блок растягивает текст
    – GOGANOID _
    4 мая 2018 в 4:25
  • Применив к #about overflow: hidden в надежде, что он обрежет изображение, не увенчается успехом. Т. к. в этом случае уже img будет растягивать блок. О чём я и говорил. 4 мая 2018 в 8:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.