#html #css #image #css-grid
Вопрос:
Я на самом деле не знаком с HTML и CSS, и у меня возникли некоторые проблемы с устранением моей проблемы.
Я пытаюсь правильно разместить изображение на сетке, чтобы сетка была видна в центре страницы, как это на самом деле и есть.
Я увидел, что есть много вопросов по этому поводу, и я попытался посмотреть на ответы, которые получили вопросы, и попытаться решить свою проблему, но на самом деле это не сработало. Поэтому я надеюсь, что кто-нибудь сможет мне в этом помочь.
lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;link rel="stylesheet" href="index.css"gt; lt;/headgt; lt;bodygt; lt;div class="grid-container"gt; lt;div class="grid-item"gt;lt;img src="6.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="3.png" class="img"gt; lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="3.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="7.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="2.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="2.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="3.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="4.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="2.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="5.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="4.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="4.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="8.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="5.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="5.png" class="img"gt;lt;/divgt; lt;div class="grid-item"gt;lt;/divgt; lt;div class="grid-item"gt;lt;img src="9.png" class="img"gt;lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; CSS
.grid-container { display: grid; grid-template-columns: repeat(7, 1fr); background-color: #8B38BE; padding: 70px; margin: auto; width: 700px; } .grid-item { background-color: #E0E7FF; border: 1px solid black; padding: 40px; text-align: center; } .grid-item gt; img { max-width: 100%; height: auto; object-fit: cover; display: block; } Комментарии:
1. В вашем img довольно много отступов — это то, что вы хотите, или вы хотите, чтобы img заполнял квадрат сетки?
2. @AHaworth да, я хочу, чтобы img заполнял квадрат сетки и хорошо выглядел
3. Если вы хотите, чтобы каждый img заполнял свой квадрат сетки, вы можете сделать это с помощью обложки, подходящей для объекта, но если вы дадите ему все это заполнение, он будет выглядеть очень маленьким в пределах своего квадрата. Вам нужна обивка?
Ответ №1:
Хорошо, ты можешь сделать это вот так:
.grid-container { display: grid; grid-template-columns: repeat(7, 1fr); background-color: #8B38BE; padding: 70px; margin: auto; width: 700px; } .grid-item { background-color: #E0E7FF; border: 1px solid black; padding: 40px; text-align: center; position:relative; } .grid-item gt; img { width: 100%; object-fit: cover; display: block; object-fit: cover; position:absolute; left: 0; top: 0; height: 100%; } Таким образом, в этом случае вы размещаете img так, чтобы он был абсолютным и имел высоту и ширину, такие же, как элемент сетки. Но затем вы добавите object-fit , что позволит изображению хорошо вписаться в элемент сетки.
Комментарии:
1. брат, это работает для меня для некоторых изображений, но для некоторых из них они увеличиваются по высоте сетки, но не заполняют сетку (ширина). Есть идеи?
2. Вы имеете в виду, что изображения больше, чем элемент сетки, и они обрезаются?
3. Попробуйте удалить
max-widthи изменить его сwidthпомощью ?4. Никакие изображения не становятся больше, чем сетка-элемент, просто некоторые из них идеально подходят, а некоторые из них как бы «обрезаны». Изображение показано полностью, как оно есть, но оно не заполняет ширину пояса, высота в порядке. Надеюсь, я правильно это объясняю.
5. отлично, теперь это работает, хвала.
Ответ №2:
Вместо использования .grid-item gt; img {} я бы просто определил его как класс (поскольку вы говорите об этом, у него есть класс .img. Далее удалите обивку и используйте высоту:100%
.img { max-width: 100%; height: 100%; padding: 0; object-fit: cover; display: block; } Ответ №3:
Здесь я использовал соотношение сторон. Пожалуйста, обновите css ниже в своем коде.
.grid-item { background-color: #E0E7FF; border: 1px solid black; padding-bottom: 100%; text-align: center; position: relative; } .grid-item gt; img { max-width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } Ответ №4:
Из того, что я понимаю, вы пытаетесь центрировать сетку, есть несколько способов, которыми вы можете это сделать, хотя я не уверен, как вы выглядите. Я не уверен, загружает ли он какой-либо CSS или вообще ничего не делает. Если бы вы захотели, вы могли бы сделать div со всем, что в нем есть, и сделать что-то вроде:
.grid { position: absolute; left: 50%; top: 50%; transform: translateX(-50%); }