Question

我正在尝试制作9张图像以适合一页，每张图像分别占据33%和width中的height。请帮忙，我正在尝试建立电话界面。

@font-face {
        font-family: font;
        src: url("font.ttf") format("truetype");
    }
    body {
    font-family:font;
    }
    img {
    height:30vh;
    }
    .row {
    width:100vw;
    }

    <body>
    <center>
    <div class="row">
    <a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
    <a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
    <a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
    </div>
    <div class="row">
    <a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
    <a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
    <a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
    </div>
    <div class="row">
    <a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
    <a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
    <a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
    </div>
    </body>

Answer 1

使用CSS网格创建3x3网格非常简单。
除了使用width和max-height

的图像外，还需要一些技巧

*{margin:0;box-sizing:border-box}html,body{min-height:100%;}

#images {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

#images img{
  display: block;
  width: 100%;
  max-height: 100%;
  object-fit:cover;
}

<div id="images">

  <a href="music.html"><img src="http://placehold.it/300x300/0bf/fff?text=1"></a>
  <a href="music.html"><img src="http://placehold.it/300x300/f0b/fff?text=2"></a>
  <a href="music.html"><img src="http://placehold.it/300x300/bf0/fff?text=3"></a>
  <a href="music.html"><img src="http://placehold.it/300x300/fb0/fff?text=4"></a>
  <a href="music.html"><img src="http://placehold.it/300x300/0fb/fff?text=5"></a>
  <a href="music.html"><img src="http://placehold.it/300x300/b0f/fff?text=6"></a>
  <a href="music.html"><img src="http://placehold.it/300x300/bbf/fff?text=7"></a>
  <a href="music.html"><img src="http://placehold.it/300x300/bfb/fff?text=8"></a>
  <a href="music.html"><img src="http://placehold.it/300x300/0bf/fff?text=9"></a>
  
</div>

Answer 2

尝试这样的事情。

我将div替换为背景图像，而不是图像标签，这样图像就不会歪斜。

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.cat {
  background-image: url(https://placekitten.com/300/300);
  height: 100%;
  width: 33.33333%;
  float: left;
  background-size: cover;
  background-position: center;
}


.row {
  width: 100%;
  height: 33.33333%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="row">
    <a href="music.html"><div class="cat"></div></a>
    <a href="music.html"><div class="cat"></div></a>
    <a href="music.html"><div class="cat"></div></a>
  </div>
  <div class="row">
    <a href="music.html"><div class="cat"></div></a>
    <a href="music.html"><div class="cat"></div></a>
    <a href="music.html"><div class="cat"></div></a>
  </div>
  <div class="row">
    <a href="music.html"><div class="cat"></div></a>
    <a href="music.html"><div class="cat"></div></a>
    <a href="music.html"><div class="cat"></div></a>
  </div>
</body>
</html>

如何使图像占据页面的一部分并相应地更改大小？

2 个答案: