flex img

程式語法：

<style>
 
  .row1215 {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
 
}

/* Create two equal columns that sits next to each other */
.column1215 {
  width: 25%;
  margin-bottom: 2px;
 
}

.column1215 img {
  width: 96% !important;
  margin: 0px;
  padding: 0px;
  border: none;
  box-shadow: none;
 
}
 
</style>
<br>
<button onclick="one()">放大</button> 
<button onclick="two()">復原</button>
<br>

<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column1215");

// Declare a "loop" variable
var i;

// Full-width images
function one() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "100%";
  }
}

// Two images side by side
function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "25%";
  }
}


</script>
<br>

<div class="row1215">
  <div class="column1215">
    <img src="https://images.unsplash.com/photo-1638585665789-1d7da9dc7b90?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"></div>
  <div  class="column1215">
    <img src="https://images.unsplash.com/photo-1632226846632-11ca139d5c1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Nzd8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"></div>
  <div  class="column1215">
    <img src="https://images.unsplash.com/photo-1627371735986-e12bec3360ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"></div>
  <div  class="column1215">
     <img src="https://images.unsplash.com/photo-1622865313564-d985bc4a295d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjgwfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"></div>
  <div  class="column1215">
    <img src="https://images.unsplash.com/photo-1619185750583-2acbf4952dce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MzIyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"></div>
 
   <div  class="column1215">
    <img src="https://images.unsplash.com/photo-1618234461622-ae3bc0aed2cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MzY3fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"></div>
 
  <div  class="column1215">
    <img src="https://images.unsplash.com/photo-1617879460473-1f8c8dccd7fe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"></div>
 
  <div  class="column1215">
    <img src="https://images.unsplash.com/photo-1617447639585-c1385c3358ed?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"></div>
 
 
</div>