Question

我需要在侧边栏中制作具有相同宽度和不同高度的图像，而没有图像空间

请看懂我的意思的图片

我正在使用vuejs，css和html

.column {
  float: left;
  width: 50%;
  
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}


    .img-dtm{
        width: 100%;
        border: 1px;
        border-style: solid;
       
    }

<!-- Sidebar -->
        <div class="w3-sidebar w3-bar-block w3-border-right" style="display:none;top:0px;right:0;width:30%;" id="mySidebar">

            <div class="row">
                <div class="column">
            <div id="MM_P1" value="MM_P1" v-on:click="go_map"><img class="img-dtm" src="assets/images/DTM/MM_P1.png" ></div>
            <div id="MM_P2" value="MM_P2" v-on:click="go_map"><img  class="img-dtm" src="assets/images/DTM/MM_P2.png" ></div>
            <div id="MM_P3" value="MM_P3" v-on:click="go_map"><img class="img-dtm" src="assets/images/DTM/MM_P3.png" ></div>
            <div id="MM_P4" value="MM_P4" v-on:click="go_map"><img  class="img-dtm" src="assets/images/DTM/MM_P4.png" ></div>
            <div id="MM_P5" value="MM_P5" v-on:click="go_map"><img   class="img-dtm" src="assets/images/DTM/MM_P5.png" ></div>

                </div>
                <div class="column">
             <div id="MM_P6" value="MM_P6" v-on:click="go_map"><img class="img-dtm" src="assets/images/DTM/MM_P6.png" ></div>
             <div id="MM_P7" value="MM_P7" v-on:click="go_map"><img   class="img-dtm" src="assets/images/DTM/MM_P7.png" ></div>
             <div id="MM_P8" value="MM_P8" v-on:click="go_map"><img  class="img-dtm" src="assets/images/DTM/MM_P8.png" ></div>
             <div id="MM_P9" value="MM_P9" v-on:click="go_map"><img   class="img-dtm" src="assets/images/DTM/MM_P9.png" ></div>

                </div>
                
                </div>
            
        
        </div>


        <!-- Page Content -->
        <div class="w3-teal">
            <button id="sidebar-btn" class="w3-button w3-teal w3-xlarge w3-right" style="position: fixed;top:50%;right:0;" v-on:click="open_close_sidebar"><</button>
        </div>

我尝试过，但是我用图像取代了空间

Answer 1

尝试以下代码：

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height =  getRandomSize(200, 400);
  allImages += '<img src="https://placekitten.com/'+width+'/'+height+'" alt="pretty kitty">';
}

$('#photos').append(allImages);

#test { 
  float:left;
  width: 60%;
  text-align: center;
}
#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

body {
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="test">Lorem Ipsum</div>
  <div id="photos"></div>
</div>

我如何在带有两列的侧边栏中制作图像

1 个答案: