@Vit632

Как правильно разместить картинки на странице?

Я пробую разместить картинки на странице. Получаю бардак
Как правильно работать с картинками?

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

Вариант-2.
Или Bootstrap можно настроить что бы картинки подгонялись под нужный размер?
https://jsfiddle.net/User65659/ge2rw04n/21/
Я начинающий...

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

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

Код CSS
spoiler
.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%;
}


Код HTML
spoiler

<!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><img src="https://habrastorage.org/webt/62/f1/a0/62f1a06f704f4110722367.png" alt="image"/>
    <!-- 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>




62f1a07b82bb9193857663.png

Я так разбил страницу на блоки... По своему разумению.

62f1a0a7318c9738470025.png

62f1a109e2832608223172.png
  • Вопрос задан
  • 103 просмотра
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы