如何在网格中添加补丁到图像 . 以及如何更改网格图像的大小 . 我正在使它适合移动设备 . 它应该是移动响应 .
<!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>
我正在尝试创建如下图所示的网格图像 . 我也在尝试为给定的图像添加补丁 . 如何在网格视图中更改每个图像的大小 . 它应该是移动响应，使其适用于任何屏幕 .
1 回答
试试这个：
如果您愿意添加边距或填充，请考虑稍微编辑这些百分比 .