主页 / 问题 / 822842
Accepted
GOGANOID _
Asked:2020-05-04 01:35:27 +0000 UTC2020-05-04 01:35:27 +0000 UTC

图像爬出块？

  • 772

如何确保图像不会超出 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>

html

1 个回答

  1. Best Answer

    作为一种选择

    #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，它将始终拉伸父块。

    • 0

相关问题