Блог

Главная - Вопросы по программированию - Упорядочивание адаптивного imageview в Bootstrap grid

Упорядочивание адаптивного imageview в Bootstrap grid

#html #css #twitter-bootstrap #bootstrap-grid

#HTML #css #twitter-bootstrap #bootstrap-grid

Вопрос:

Я пытаюсь поддерживать 2 столбца на странице, где левый столбец представляет собой изображение, а правый столбец — текст описания. Теперь, чтобы сохранить свойство responsive, моя модель должна следовать функции, которая при меньшем разрешении экрана автоматически настраивает изображение в соответствии с шириной контейнера. Теперь проблема в том, что изображение и абзац автоматически располагаются друг под другом всякий раз, когда размер экрана мал, Но изображение не занимает всю ширину при его автоматической компоновке. или увеличение ширины при увеличении размера изображения (я не мог вручную задать размер изображения, потому что это сделало бы размер изображения полосой при изменении разрешения экрана)

Теперь я даю коды..

 #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>

Как можно получить цель? Любая помощь очень ценится.

Ответ №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>

Вы можете прочитать больше о bootstrap grid system здесь: https://getbootstrap.com/docs/4.0/layout/grid /

Что касается изображения, вы можете попробовать использовать классы начальной загрузки, чтобы настроить скорость реагирования: «Изображения в 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).

Надеюсь, это поможет.