How Do I Make An Image Take Up A Percent Of A Page, and Change Size Accordingly?

Question

I'm trying to make 9 images to fit on one pages, each taking up 33% of the width and height. Please help, i'm trying to make a phone interface.

@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>

`` tag is unclosed, but anyways should not be used since obsolete. — Roko C. Buljan, Mar 10 '19 at 19:37
Possible duplicate of [Grid of responsive squares](https://stackoverflow.com/questions/20456694/grid-of-responsive-squares) — Nils Kähler, Mar 10 '19 at 19:53

score 1 · Answer 1 · answered Mar 10 '19 at 19:57

Using CSS grid is quite simple to create a 3x3 grid.
Than for the images a bit of trickery is needed using width and 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>

alex351 · Answer 2 · 2019-04-09T11:36:13.770

Try something like this.

Instead of image tags, I have div's with a background-image, in that way, the images do not get skewed.

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>

score 0 · Answer 3 · answered Mar 10 '19 at 22:12

Is this what you want?

@font-face {
        font-family: font;
        src: url("font.ttf") format("truetype");
    }
    body {
    font-family:font;
    }
    img {
    height:30vh;
    width:30vw
    }
    .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>

How Do I Make An Image Take Up A Percent Of A Page, and Change Size Accordingly?

3 Answers3