響應式圖像 alignment

Question

如何使這個 alignment 響應？

中心的圖像是其他圖像的兩倍，並且都具有相同大小的邊框。

到目前為止，這是我的代碼，它在桌面和垂直移動設備上運行良好，但在所有中間分辨率上都不太好。

 .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 和 ZC7A628CBA22E28EB17B5F5C6AE2A 甚至想寫 6 萬個媒體查詢。）

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

在您想要的任何斷點處，只需更改其中一些 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 3

您可以使用此代碼

 <,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>