html - 响应式图像对齐

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

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

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