我试图在页面中保留 2 列，其中左列是图像，右列是描述文本。现在要保持响应属性，我的模型必须遵循以下功能:当屏幕分辨率较低时，它会自动管理图像以适应容器宽度。 现在的问题是 - 每当屏幕尺寸较小时，图像和段落都会自动一个接一个地排列 - 但图像在自动排列时无法占据整个宽度。或者当图像尺寸较大时采用更大的宽度(我无法手动给出图像尺寸，因为它会使图像尺寸成为不同屏幕分辨率的一个栏)
现在我给出代码..
#main_head {
border: 1px solid black;
padding: 10px;
}
#main_head img {
width: auto;
height: 480px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>NewsPaper</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./NewsStyle.css"></link>
</head>
<body>
<div class="jumbotron text-center">
<h1>THE News Daily</h1>
</div>
<div class="container">
<div class="row" style="border: 1px solid black;padding: 10px;">
<h3 class="text-center">The Most Important Article!</h3>
<div class="col-md-6 "><img src="/image/lIbyw.png"></div>
<div class="col-md-6">
<p>
<h4>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their
exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Nulla commodo tincidunt massa, id tincidunt massa sodales nec. Suspendisse quis commodo erat, ac iaculis libero. Nulla laoreet tempus eros, sit amet
scelerisque enim. Vestibulum sed facilisis ante, a eleifend arcu. Morbi porta elit sit amet auctor semper. Ut laoreet turpis eu justo vestibulum, nec tincidunt nisi fermentum. Quisque vehicula elementum massa, a convallis ante maximus et.
Donec et auctor ex. Sed eu venenatis neque. Sed faucibus semper ullamcorper. Pellentesque sodales non magna et vehicula. Ut vel ultricies ex, in feugiat est.<a>read more >>></a> </h4>
</p>
</div>
</div>
</div>
</body>
</html>如何实现目标？非常感谢任何帮助。
最佳答案
您可以使用“col-6”类(不使用 xs、md、lg 等)。这会将容器在任何屏幕宽度上一分为二:
<div class="row">
<div class="col-6">
<img src="/image/lIbyw.png">
</div>
<div class="col-6">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text...</p>
<a>read more >>></a>
</div>
</div>
您可以在此处阅读有关 Bootstrap 网格系统的更多信息:https://getbootstrap.com/docs/4.0/layout/grid/
至于图像，您可以尝试使用 Bootstrap 类来设置响应:“Bootstrap 中的图像使用 .img-fluid 进行响应。max-width: 100%; 和 height: auto; 应用于图像以便它随父元素缩放。”
<img src="..." class="img-fluid" alt="Responsive image" />
另一种方法是使用此处描述的对象匹配:https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
一些旁注:h4 不能是 p 的子元素，并且 .row 中的元素(比如你的 h3)应该用 .col-x 类(在你的例子中是 col-12)包裹。
希望对您有所帮助。
关于html - 在 Bootstrap 网格中安排响应式 ImageView ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54970728/