Question

我正在尝试在页面中维护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="https://i.stack.imgur.com/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>

如何实现目标？非常感谢您的帮助。

Answer 1

您可以使用“ col-6”类（不使用xs，md，lg等）。它将在任何屏幕宽度上将容器分为两个：

<div class="row">
  <div class="col-6">
    <img src="https://i.stack.imgur.com/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>

您可以在此处了解有关引导网格系统的更多信息：https://getbootstrap.com/docs/4.0/layout/grid/

对于图像，您可以尝试使用引导程序类来设置响应性：“ Bootstrap中的图像使用.img-fluid进行响应。最大宽度：100％；高度：自动；应用于图像以便与父元素一起缩放。”

<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）进行包装。

希望有帮助。

在Bootstrap网格中安排响应式imageview

1 个答案: