到目前为止，我已经将图像叠加在块元素中，并在其旁边排列了一个段落作为描述。我希望它是这样的，当我将屏幕调整到一个较小的屏幕，图像缩小，直到它达到其最小宽度并适合视口，但是使用我当前的代码，图像不会这样做，当段落div在图像下方，它留下了很多空白区域:(任何提示？
article{
width:70%;
background:yellow;
margin:0 auto;
}
#image{
max-width:48%;
float:left;
min-width:400px;
}
#image img {
display:inline-block;
max-width: 100%;
height:auto;
min-width:320px;
float:left;
}
#words{
float:left;
max-width:48%;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<article>
<div id="main">
<div id="image">
<img src="mono.png">
<img src="prairie.png">
<img src="night.png">
</div>
<div id="words">
<h1>HELLO WORLD!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat in egestas erat imperdiet sed euismod nisi. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. At auctor urna nunc id cursus metus aliquam eleifend. Aliquam sem fringilla ut morbi tincidunt augue interdum. Sed libero enim sed faucibus turpis in eu mi. Erat nam at lectus urna. Eget dolor morbi non arcu risus. Tempus egestas sed sed risus. Vel turpis nunc eget lorem. Faucibus purus in massa tempor nec feugiat nisl pretium fusce. Leo in vitae turpis massa sed. Consectetur lorem donec massa sapien faucibus et molestie.
Varius vel pharetra vel turpis nunc eget lorem dolor sed. Ullamcorper dignissim cras tincidunt lobortis. Mus mauris vitae ultricies leo integer. Turpis cursus in hac habitasse platea. Volutpat diam ut venenatis tellus in. Tellus integer feugiat scelerisque varius. Vitae congue mauris rhoncus aenean vel. Tempor nec feugiat nisl pretium fusce id velit. Diam ut venenatis tellus in metus vulputate. Viverra ipsum nunc aliquet bibendum enim. Eu scelerisque felis imperdiet proin fermentum.
In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Posuere ac ut consequat semper. Pellentesque elit eget gravida cum sociis. Turpis massa sed elementum tempus. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Volutpat blandit aliquam etiam erat velit scelerisque. Facilisis gravida neque convallis a cras semper auctor. Ac tincidunt vitae semper quis. Velit egestas dui id ornare arcu odio ut sem. Praesent semper feugiat nibh sed pulvinar proin gravida. Elit at imperdiet dui accumsan sit amet nulla. Mauris sit amet massa vitae tortor condimentum lacinia.
Quam vulputate dignissim suspendisse in est ante in nibh mauris. Volutpat blandit aliquam etiam erat. Eleifend quam adipiscing vitae proin sagittis. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Phasellus egestas tellus rutrum tellus pellentesque eu. Lacinia quis vel eros donec ac odio tempor orci dapibus. Eu scelerisque felis imperdiet proin fermentum leo vel orci. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Hac habitasse platea dictumst quisque sagittis purus sit amet. Lacus laoreet non curabitur gravida. Massa id neque aliquam vestibulum morbi blandit cursus. Malesuada proin libero nunc consequat interdum varius sit. Aliquam eleifend mi in nulla posuere sollicitudin. Morbi tristique senectus et netus et malesuada fames ac. At elementum eu facilisis sed odio morbi quis commodo odio. Vitae tortor condimentum lacinia quis vel eros. A iaculis at erat pellentesque adipiscing commodo elit at.
Erat imperdiet sed euismod nisi porta. Facilisi cras fermentum odio eu feugiat. Nisl purus in mollis nunc sed id semper risus in. Egestas erat imperdiet sed euismod nisi porta lorem mollis. Bibendum est ultricies integer quis auctor elit. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Tempor nec feugiat nisl pretium. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Maecenas pharetra convallis posuere morbi leo. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu. Sapien eget mi proin sed. Mattis molestie a iaculis at erat.</p>
</div>
</div>
</article>
</body>
</html>
答案 0 :(得分：1)
您可以使用像bootstrap这样的框架，并将图像包含在网格视图中。或者你可以手动调整图像的宽度
@media screen and (min-width: 400px) {
img{
//adjust the width - eg 40%
}
}
@media screen and (min-width: 800px) {
img{
//adjust the width - eg 80%
}
}
答案 1 :(得分：0)
当段落在下一行向下移动时，您需要使用媒体查询在该点创建一个css媒体查询断点，并将图像宽度添加为100％。