Как показывать полные изображения вместо частичных изображений для квадратных изображений

#html #css

#HTML #css

Вопрос:

В моем макете сетки каждый элемент имеет квадратное изображение. Я бы хотел, чтобы каждое квадратное изображение отображало полное изображение, которое я загружаю. Прямо сейчас он показывает только частичное изображение (см. Ниже). введите описание изображения здесь

Кстати, все изображения, которые я загружаю, имеют квадратную форму. Здесь я бы очень признателен за помощь.

 .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-row-gap: 80px;
grid-column-gap: 50px;
justify-content: start; 
}


  .grid .photo {
  width: 100%;
  background-size: contain;
  background-position: center;
  }

.grid .photo:after {
content: "";
display: block;
padding-bottom: 100%;
}

<div class="grid">
<article> 
<a href="#">
<div class="photo" style="background-image: url(img/example1.jpg);"></div>
<div class="text">
<h3>Title</h3>
<p>This is a dummy text to show an example</p>
</div>
</a>
</article> 

<article> 
<a href="#">
<div class="photo" style="background-image: url(img/example2.jpg);"></div>
<div class="text">
<h3>Title</h3>
<p>This is a dummy text to show an example</p>
</div>
</a>
</article> 

<article> 
<a href="#">
<div class="photo" style="background-image: url(img/example3.jpg);"></div>
<div class="text">
<h3>Title</h3>
<p>This is a dummy text to show an example</p>
</div>
</a>
</article>

1. как насчет background-size: 100% ?

2. спасибо, но это не сработало:(

3. Работает ли это у вас здесь? jsbin.com/bitojugili/edit?html ,css, вывод

4. извините, не уверен, как изображения должны там работать, но это не сработало, когда я попробовал background-size: 100% в моем коде:/ спасибо, хотя

5. По предоставленной мной ссылке ваш код работает нормально, сам по себе, показывая квадратные изображения в ваших контейнерах.

Ответ №1:

Установка background-size в .photo классе значения cover или contain может сработать. Аналогично, object-fit свойство может работать … попробуйте несколько значений.

Лично я никогда не устанавливаю фоновое изображение элемента, если только оно не должно быть фоном всей страницы. Я предпочитаю создавать изображение в div, тогда вы можете соответствующим образом настроить width/height/min-width/min-height/max-height/max-width свойства