Адаптивное выравнивание изображений

Question

Как мне сделать это выравнивание отзывчивым?

Изображение в центре в два раза больше других, и все имеют границутот же самый размер.

Пока это мой код, он хорошо работает на настольных и вертикальных мобильных устройствах, чуть менее хорошо со всеми промежуточными разрешениями.

.border8{border:8px solid #fae1a2;}
.gallery_line{text-align:center;}
.gallery_column_left{float:left;width:25%;}
.gallery_column_center{float:left;width:50%;}
.gallery_column_right{float:left;width:25%;}
.gallery_img_big{max-width:100%;}
.gallery_img_small{max-width:100%;}

<div class="gallery_line">

    <div class="gallery_column_left">
    <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno.jpg"  width="200" height="133" class="border8 gallery_img_small lazyload" /></a>
    <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-4.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4.jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a>
    </div>

    <div class="gallery_column_center">
    <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-7.jpg"><img src="https://www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7.jpg" data-src="https://www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7.jpg"  width="432" height="288" class="border8 gallery_img_big lazyload" /></a>
    </div>

    <div class="gallery_column_right">
    <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-6.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6.jpg"  width="200" height="133" class="border8 gallery_img_small lazyload" /></a>
    <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-2.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2.jpg"data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2.jpg"  width="200" height="133" class="border8 gallery_img_small lazyload" /></a>
    </div>

<a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-8.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8.jpg"  width="200" height="133" class="border8 gallery_img_small lazyload" /></a>
<a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-panorama.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama.jpg"   width="200" height="133" class="border8 gallery_img_small lazyload" /></a>
</div>

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

Каков лучший способ сделать его отзывчивым?

(я нехочу использовать javascript или javascript framework, только html и css.) (я даже не хочу писать тысячу медиазапросов)

Answer 1

Прежде всего вы должны удалить встроенную ширину и высоту из изображений.

Затем с помощью flexbox и медиазапросов легко сделать его отзывчивым.

Пример кода:

  .border8 {
    border:8px solid #fae1a2;
  }

  .gallery_line {
    text-align:center;
  }

  .gallery_img_big {
    max-width: calc(100% - 16px);
  }

  .gallery_img_small {
    max-width: calc(100% - 16px);
  }

  .row {
    display: flex;
    justify-content: space-between;
  }

  .gallery_column_left , .gallery_column_right {
    flex-basis: 24%;
    max-width: 24%;
    display: flex;
    flex-direction: column;
  }

  .gallery_column_center {
    flex-basis: 48%;
    max-width: 48%;
  }

  .row.bottom-row {
    flex-wrap: nowrap;
    justify-content: center;
    max-width: 48%;
    margin: auto;
  }

  .bottom-row a {
    max-width: 49%;
    margin: 0 0.5%
  }

  @media (max-width: 480px) {
    .row {
      flex-wrap: wrap;
    }

    .gallery_column_left , .gallery_column_right {
      flex-basis: 100%;
      max-width: 100%;
      flex-direction: row;
      justify-content: space-between;
    }

    .gallery_column_left a , .gallery_column_right a {
      flex-basis: 49%;
      max-width: 49%;
    }

    .gallery_column_center {
      flex-basis: 100%;
      max-width: 100%;
    }

    .row.bottom-row {
      max-width: 100%;
      justify-content: space-between;
    }

    .bottom-row a {
      max-width: 49%;
      margin: 0;
    }
  }

<div class="gallery_line">
    <div class="row">
      <div class="gallery_column_left">
        <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno.jpg" class="border8 gallery_img_small lazyload" /></a>
        <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-4.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4.jpg" class="border8 gallery_img_small lazyload" /></a>
      </div>

      <div class="gallery_column_center">
        <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-7.jpg"><img src="https://www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7.jpg" data-src="https://www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7.jpg" class="border8 gallery_img_big lazyload" /></a>
      </div>

      <div class="gallery_column_right">
        <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-6.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6.jpg" class="border8 gallery_img_small lazyload" /></a>
        <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-2.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2.jpg"data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2.jpg" class="border8 gallery_img_small lazyload" /></a>
      </div>
    </div>


    <div class="row bottom-row">
      <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-8.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8.jpg" class="border8 gallery_img_small lazyload" /></a>
      <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-panorama.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama.jpg" class="border8 gallery_img_small lazyload" /></a>

    </div>
  </div>

Answer 2

Вы можете использовать этот код

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>index</title>
  <style type="text/css">
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 10px;
      background-color: #942305;
    }
    
    .container {
      max-width: 900px;
    }
    
    .border8 {
      border: 8px solid #fae1a2;
    }
    
    .gallery_line {
      text-align: center;
    }
    
    .gallery_column_left {
      float: left;
    }
    
    .gallery_column_center {
      float: left;
    }
    
    .gallery_column_right {
      float: left;
    }
    
    .gallery_img_big {
      max-width: 100%;
      margin-bottom: 15px;
    }
    
    .gallery_img_small {
      max-width: 100%;
      margin-bottom: 15px;
    }
    
    @media only screen and (max-width: 768px) {
      .gallery_img_small {
        max-width: 100%;
        margin-bottom: 15px;
        display: inline-block;
        width: 174px;
      }
    }
    
    @media only screen and (max-width: 575px) {
      .gallery_img_small {
        max-width: 100%;
        margin-bottom: 15px;
        display: block;
      }
      .gallery_img_big {
        max-width: 100%;
        margin-bottom: 15px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="gallery_line">
        <div class="gallery_column_left col-md-3 col-sm-3 col-xs-12">
          <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno.jpg" width="200" height="133" class="border8 gallery_img_small lazyload"
            /></a>
          <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-4.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4.jpg" width="200" height="133" class="border8 gallery_img_small lazyload"
            /></a>
        </div>
        <div class="gallery_column_center col-md-6 col-sm-6 col-xs-12">
          <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-7.jpg"><img src="https://www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7.jpg" data-src="https://www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7.jpg" width="432" height="288" class="border8 gallery_img_big lazyload"
            /></a>
        </div>
        <div class="gallery_column_right col-md-3 col-sm-3 col-xs-12">
          <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-6.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6.jpg" width="200" height="133" class="border8 gallery_img_small lazyload"
            /></a>
          <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-2.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2.jpg" width="200" height="133" class="border8 gallery_img_small lazyload"
            /></a>
        </div>
        <div class="gallery_column_center col-md-6 offset-md-3 col-sm-12 col-xs-12">
          <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-8.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8.jpg" width="200" height="133" class="border8 gallery_img_small lazyload"
            /></a>
          <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-panorama.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama.jpg" width="200" height="133" class="border8 gallery_img_small lazyload"
            /></a>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Answer 3

В любой точке останова, которую вы хотите, просто измените ширину нескольких из этих div, это действительно простой макет, который у вас есть.

@media screen and (max-width: 600px) { // or whatever you want
  .gallery_column_left{ float:left; width:100%; }
  .gallery_column_center{ float:left; width:100%; }
  .gallery_column_right{ float:left; width:100%; }
}

Это сделает эти разделы полной ширины, и изображения будут размещеныбольше похоже на колонку, которая у вас есть. Однако для чего-то действительно отзывчивого вам нужно снять фиксированные размеры с элементов изображения в html и обработать их в css.