Question

如何为网格中的图像添加补丁。以及如何更改网格图像的大小。我正在使其移动友好。它应该是移动响应的。

   <!DOCTYPE html>
    <html>
    <style>
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }

    .header {
        text-align: center;
        padding: 32px;
    }

    .row {
        display: -ms-flexbox; /* IE 10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE 10 */
        flex-wrap: wrap;
        padding: 0 4px;
    }

    /* Create two equal columns that sits next to each other */
    .column {
        -ms-flex: 50%; /* IE 10 */
        flex: 50%;
        padding: 0 8px;
    }

    .column img {
        margin-top: 7px;
        vertical-align: middle;
        border-radius: 5%;
    }

    </style>
    <body>

    <!-- Header -->
    <div class="header" id="myHeader">
      <h1>Image Grid</h1>
      <p>Click on the buttons to change the grid view.</p>
    </div>

    <!-- Photo Grid -->
    <div class="row"> 
      <div class="column">
        <img src="character.jpg" style="width:100%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:100%">
        <img src="character.jpg" style="width:100%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:100%">
      </div>
      <div class="column">
        <img src="lover_name.jpg" style="width:100%">
        <img src="character.jpg" style="width:100%">
        <img src="http://www.quickmeme.com/img/66/66e01f5ecd44767a19bb8e9a0f3e97da92a660048860eef482c6c2b66871f4a1.jpg" style="width:100%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:100%">
      </div>  
    </div>

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

    // Declare a loop variable
    var i;

    // Add active class to the current button (highlight it)
    var header = document.getElementById("myHeader");
    var btns = header.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }
    </script>

    </body>
    </html>

我正在尝试创建如下所示的网格。我也在尝试将补丁添加到给定的图像。如何更改网格视图中每个图像的大小。它应该是移动响应的，以使其可以在任何屏幕上使用。

Answer 1

尝试以下方法：

<!-- Photo Grid -->
    <div class="row" style=“width:100%”> 
      <div class="column" style="width:50%">
        <img src="character.jpg" style="width:25%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:25%">
        <img src="character.jpg" style="width:25%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:25%">
      </div>
      <div class="column" style="width:50%">
        <img src="lover_name.jpg" style="width:25%">
        <img src="character.jpg" style="width:25%">
        <img src="http://www.quickmeme.com/img/66/66e01f5ecd44767a19bb8e9a0f3e97da92a660048860eef482c6c2b66871f4a1.jpg" style="width:25%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:25%">
      </div>  
    </div>

如果您愿意增加边距或填充，请考虑稍微修改这些百分比。

我正在尝试创建如下所示的网格

1 个答案: