По большей части мои изображения загружаются правильно, используя систему координат.Я следовал этому уроку https://medium.com/deemaze-software/css-grid-responsive-layouts-and-components-eee1badd5a2f, но, похоже, не мог ударить ногтем по голове.
Вот что я получаю в данный момент:
https://imgur.com/a/vbCwHVm
и вот мой css:
.picture-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
background-color: #ffffff;
}
.picture-grid>img {
max-width: 100%;
height: auto;
width: auto;
object-fit: cover;
border: 1px solid #ffffff;
}
Вот шаблон Iиспользую колбу Python.
{% extends 'layout.html' %}
{% block body %}
<head>
<link rel="stylesheet" type="text/css" href="static/blog.css">
</head>
<body>
<div class="background" style="background-image: url('/static/london.jpg');">
<div>
<p style="color: #ffffff"; class="background-text">LONDON</p>
</div>
</div>
<div class="picture-grid">
{% for photo in london_photos: %}
<img src ='{{photo}}' alt="Unloadable Photo">
{% endfor %}
</div>
<div id="Modal" class="modal">
<img class="modal-content" id="pop_image">
</div>
</body>
{% endblock %}