Изображение сетки адаптивное и без отступов

Мне нужно «построить» изображение, состоящее из разных частей. Вот схема:

Между каждым фрагментом изображения нет места или отступов, и было бы неплохо, если бы все изображение было отзывчивым ... есть идея? Я пробовал это, но изображение теряет отзывчивость:

     echo '<div id = "top_testa" style = "overflow: hidden; ">
     <div class = "image-div" style = "float:right;margin-left:0px;max-width: 
    20%;max-height: 20%;" >

          </div>
      <div class = "image-div" style = "float:right;margin-right:8.5%;max-width: 
   20%;max-height: 20%;" >
   <img 
 src = "TestaLuc.png" id = "top_head" name = "top_head">
  </div>

  <div class = "image-div" style = "float:left;margin-left:0px;max-width: 20%;max-height: 20%;">

  </div>


  <div style = "clear:right;"></div>
</div>';
echo '<div id = "base_testa" style = "overflow: hidden; ">
  <div class = "image-div" style = "float:right;margin-left:0px;max-width: 20%;max-height: 20%;" >

  </div>
  <div class = "image-div" style = "float:right;margin-right:8.5%;max-width: 20%;max-height: 20%;" >
   <img src = "BaseTestaMim.png" id = "bottom_head" name = "bottom_head">
  </div>

  <div class = "image-div" style = "float:right;margin-left:0px;max-width: 20%;max-height: 20%;">

  </div>


  <div style = "clear:right;"></div>
</div>';
echo '<div id = "asta" style = "overflow: hidden; ">
  <div class = "image-div" style = "float:right;margin-left:0px;max-width: 20%;max-height: 20%;" >

  </div>
  <div class = "image-div" style = "float:right;margin-right:8.6%;max-width: 20%;max-height: 20%;" >
   <img src = "AstSupNull.png" id = "top_asta" name = "top_asta">
  </div>

  <div class = "image-div" style = "float:right;margin-left:0px;max-width: 20%;max-height: 20%;">

  </div>


  <div style = "clear:right;"></div>
</div>';

echo '<div id = "middle" style = "overflow: hidden; ">
  <div class = "image-div" style = "float:right;margin-left:0px;max-width: 20%;max-height: 20%;" >

  </div>
  <div class = "image-div" style = "float:right;margin-right:13.3%;max-width: 20%;max-height: 20%;" >
   <img src = "AstInfLuc.png" id = "bottom_left_asta" name = "bottom_left_asta" align = "right">
  </div>

Спасибо

О вашем коде: закройте разметку PHP перед тем, как писать весь этот HTML, ваш код будет легче читать. И сделайте отступ в HTML.

— 23.03.2018 12:01

html image web responsive-design

23.03.2018 11:48

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте класс no-gutters для своих строк Bootstrap, чтобы удалить заполнение, и класс img-fluid для ваших изображений, чтобы сделать их адаптивными.

Вот фрагмент рабочего кода:

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">

<div class = "container-fluid">
    <div class = "row no-gutters">
        <div class = "col-4">
            <img class = "img-fluid" src = "https://placeimg.com/940/400/animals" alt = "">
        </div>
        <div class = "col-4">
            <img class = "img-fluid" src = "https://placeimg.com/940/400/arch" alt = "">
        </div>
        <div class = "col-4">
            <img class = "img-fluid" src = "https://placeimg.com/940/400/tech" alt = "">
        </div>
    </div>
    <div class = "row no-gutters">
        <div class = "col-6">
            <img class = "img-fluid" src = "https://placeimg.com/940/400/nature" alt = "">
        </div>
        <div class = "col-6">
            <img class = "img-fluid" src = "https://placeimg.com/940/400/people" alt = "">
        </div>
    </div>
    <div class = "row no-gutters">
        <div class = "col-12">
            <img class = "img-fluid" src = "https://placeimg.com/1240/200/any" alt = "">
        </div>
    </div>
</div>

col-4 не работает, col-md-4 работает, а no-gutter не работает. Какая версия бутстрапа мне нужна?

— 23.03.2018 12:21

Та же версия, что и тег, который вы использовали для этого вопроса, и та же версия, что и CSS, указанный в моем фрагменте.

— 23.03.2018 12:23

Хорошо, но если я не смог использовать bootstrap 4?

— 23.03.2018 12:30

Тогда я удалю свой ответ.

— 23.03.2018 12:31

Это была ошибка, извините

— 23.03.2018 12:36

23.03.2018 11:50

вам нужно установить отзывчивый тег шириной 100%