Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как правильно разместить картинки на странице? (https://javascript.ru/forum/xhtml-html-css/84339-kak-pravilno-razmestit-kartinki-na-stranice.html)

Ivan65913 09.08.2022 12:55
Как правильно разместить картинки на странице?
 
Вложений: 3
Я пробую разместить картинки на странице. Получаю бардак
Как правильно работать с картинками?

Вариант-1.
Брать задание и корректировать картинки в Paint под размер в задании?

Вариант-2.
Или Bootstrap можно настроить что бы картинки подгонялись под нужный размер?
Как это сделать?

Сайт предполагается использовать на одном мониторе - 43 дюйма.

Я начинающий...

Код
https://jsfiddle.net/User65659/ge2rw04n/22/

Ссылки для использования в "<img "
Прямые ссылки
https://i.ibb.co/jrpsy2v/img672-1.jpg
https://i.ibb.co/dPK2kMF/img694.jpg
https://i.ibb.co/4pgSRDf/0020.jpg
https://i.ibb.co/99751Fv/0021.jpg
https://i.ibb.co/L6npzVL/0023.jpg

//--//--//--//--//--//
Ссылки на просмотр
https://ibb.co/hmqwBjR
https://ibb.co/y6sygPt
https://ibb.co/Rc46TMS
https://ibb.co/ynrjZwR
https://ibb.co/QnrmFy2

Код HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<!-- body --- --- --- --- --- --- --- --- --- -->
<body>
<div class="container-fluid bg-primary">
  <div class="row bg-primary">
    <!-- Col-1 === === === === === === === === === === === -->
    <div class="col bg-danger sidebar">      
          Column-Left
          <div class="row ">
            <div class="col-5 block">      
                <h2>Наименование </h2>
                <h5>Описание объекта</h5>                
            </div>
          </div>
          <hr/>
          <!-- hr -- --- --- --  -->
          
          <div class="row ">                    
          <!-- hr   <div class="d-grid gap-2 col-6 mx-auto"> -->
          <div class="d-grid gap-2 col-6 mx-auto">
              <button class="btn btn-primary" type="button">Кнопка-1. Описание</button>
              <button class="btn btn-primary" type="button">Кнопка-2. Описание длинное, длинное </button>
              <button class="btn btn-primary" type="button">Кнопка-3. Описание</button>
          </div>
          </div>
          <hr/>
          <!-- hr -- --- --- --  -->
            <div class="row">
            <p> 
            Строка-1. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>
            Строка-2. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
            Строка-3. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
            Строка-4. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
            Строка-5. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
            Строка-6. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
            Строка-7. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
            Строка-8. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
            Строка-9. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
            Строка-10. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
 
            </p>
            </div>
     </div>
     <!-- Col-1.END === === === === === === === === === === ===  -->
     <!-- Col-2.  === === === === === === === === === === === -->
    <div class="col-4 bg-warning sidebar">
      Center
      <div class="row bg-danger"> 
      <img src="https://i.ibb.co/dPK2kMF/img694.jpg" class="img-fluid" width="600" height="800">      
      </div>
      
      <div class="row bg-success"> 
      <img src="https://i.ibb.co/4pgSRDf/0020.jpg" class="img-fluid">
      </div>
      
    </div>
    <!-- Col-2.END  === === === === === === === === === === === -->
    <!-- Col-3.   === === === === === === === === === === === -->
    <div class="col-4 bg-success sidebar">
      Right
        <div class="row bg-danger">          
          <img src="https://i.ibb.co/99751Fv/0021.jpg" class="img-fluid" width="100" height="100">  
      </div>
      
      <div class="row bg-success"> 
      <img src="https://i.ibb.co/L6npzVL/0023.jpg" class="img-responsive" width="100" height="100">
      </div>
      
    </div>
    <!-- Col-3.END.=== === === === === === === === === === === -->
  </div>
 </div>
<!-- Bootstrap 5 Scripts -->
<!-- script --- --- --- --- --- --- --- --- --- -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- script.END --- --- --- --- --- --- --- --- --- -->
</body>
<!-- body.END --- --- --- --- --- --- --- --- --- -->
</html>



Код CSS
Код:
.sidebar {
  /*position: fixed;*/
  height: 100vh;
}
 
.block {
  margin-left: auto;
  margin-right: auto;
}
 
 
/*Размеры кнопки.*/
.btn-circle {
    width: 270px;
    height: 100px;
    border-radius: 0;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    font-size: 50px;
}
 
img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

рони 09.08.2022 13:41
Ivan65913,
может так ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style type="text/css">
.row img{
    margin: 0px;  padding: 0px;
}
</style>
</head>
<!-- body --- --- --- --- --- --- --- --- --- -->
<body>
<div class="container-fluid bg-primary">
  <div class="row bg-primary">
    <!-- Col-1 === === === === === === === === === === === -->
    <div class="col bg-danger sidebar">
          Column-Left
          <div class="row ">
            <div class="col-5 block">
                <h2>Наименование </h2>
                <h5>Описание объекта</h5>
            </div>
          </div>
          <hr/>
          <!-- hr -- --- --- --  -->

          <div class="row ">
          <!-- hr   <div class="d-grid gap-2 col-6 mx-auto"> -->
          <div class="d-grid gap-2 col-6 mx-auto">
              <button class="btn btn-primary" type="button">Кнопка-1. Описание</button>
              <button class="btn btn-primary" type="button">Кнопка-2. Описание длинное, длинное </button>
              <button class="btn btn-primary" type="button">Кнопка-3. Описание</button>
          </div>
          </div>
          <hr/>
          <!-- hr -- --- --- --  -->
            <div class="row">
            <p>
            Строка-1. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>
            Строка-2. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>
            Строка-3. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>
            Строка-4. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>
            Строка-5. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>
            Строка-6. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>
            Строка-7. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>
            Строка-8. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>
            Строка-9. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>
            Строка-10. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>

            </p>
            </div>
     </div>
     <!-- Col-1.END === === === === === === === === === === ===  -->
     <!-- Col-2.  === === === === === === === === === === === -->
    <div class="col-4 bg-warning sidebar">
      Center
      <div class="row bg-danger">
      <img src="https://i.ibb.co/dPK2kMF/img694.jpg" class="img-fluid" >
      </div>

      <div class="row bg-success">
      <img src="https://i.ibb.co/4pgSRDf/0020.jpg" class="img-fluid">
      </div>

    </div>
    <!-- Col-2.END  === === === === === === === === === === === -->
    <!-- Col-3.   === === === === === === === === === === === -->
    <div class="col-4 bg-success sidebar">
      Right
        <div class="row bg-danger">
          <img src="https://i.ibb.co/99751Fv/0021.jpg" class="img-fluid" >
      </div>

      <div class="row bg-success">
      <img src="https://i.ibb.co/L6npzVL/0023.jpg" class="img-responsive" >
      </div>

    </div>
    <!-- Col-3.END.=== === === === === === === === === === === -->
  </div>
 </div>
<!-- Bootstrap 5 Scripts -->
<!-- script --- --- --- --- --- --- --- --- --- -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- script.END --- --- --- --- --- --- --- --- --- -->
</body>
<!-- body.END --- --- --- --- --- --- --- --- --- -->
</html>

Ivan65913 09.08.2022 13:57
Вложений: 1
Цитата:
Сообщение от рони
может так ...
Чё-то всё расползается..
Не получается привести в соответствие с заданием..
Я может зря связался с Бутстрапом?
Адаптивность наверное не нужна?
Если только на одном мониторе (43дюйма) будет использовать

Может есть инструменты проще?

рони 09.08.2022 14:13
Ivan65913,
что не так с картинками? цель то какая? что есть бардак и не бардак?)))

Ivan65913 09.08.2022 14:25
Вложений: 1
Цитата:
Сообщение от рони
что не так с картинками? цель то какая? что есть бардак и не бардак?)))
Ну, я ожидаю их увидеть размером и расположением как на картинке в вопросе....
А они летают...
В прошлом ответе я на картинке выделили проблемные места...
Или чего-то не понимаю?

рони 09.08.2022 14:59
Ivan65913,
ок! на всякий случай https://masonry.desandro.com/

Ivan65913 09.08.2022 17:15
Цитата:
Сообщение от рони
ок! на всякий случай https://masonry.desandro.com/
Буду смотреть...
А просто на Бустрапе сделать это не получиться?
Ну, чуток применение CSS...

рони 09.08.2022 17:36
Цитата:
Сообщение от Ivan65913
Ну, чуток применение CSS...
вполне возможно, но нужен специалист по css и bootstrap.

рони 09.08.2022 17:39
Цитата:
Сообщение от Ivan65913
Буду смотреть...
https://getbootstrap.com/docs/5.0/examples/masonry/


Часовой пояс GMT +3, время: 18:43.