Здравствуйте. Я хочу задать картинке (фиксированную) ширину 200px и высоту 200px, но при увеличении она растягивается по горизонтали . Мне нужно, чтобы они пропорционально увеличивались в размере при увеличении экрана. Такой же вопрос и с уменьшением картинки. Как это сделать в css grid
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compative" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.png">
<title>Адаптивка</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="gallery">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
<div class="items">10</div>
</div>
</div>
</body>
</html><code lang="css">
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: content-box;
}
.container {
width: 80%;
margin: auto 3rem;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
grid-auto-rows:200px;
}
.gallery > div {
padding: .5em;
background: gold;
text-align: center;
}
.img {
max-width: 100%;
height: auto;
}
</code>
Спасибо)
