响应式图像对齐

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 框架，只想使用 html 和 css。）（我连一千个媒体查询都不想写）

Answer 1

在您想要的任何断点处，只需更改其中一些 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 中处理它们。

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

首先你必须从图像中删除行内宽度和高度。

然后使用 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>

响应式图像对齐

Responsive images alignment

html

css

responsive-design