Организация адаптивного просмотра изображений в сетке Bootstrap - PullRequest
Новая
       14

Организация адаптивного просмотра изображений в сетке Bootstrap

0 голосов
/ 03 марта 2019

Я пытаюсь сохранить 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>

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

1 Ответ

0 голосов
/ 03 марта 2019

Вы можете использовать класс "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-liquid. 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).

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

...