Как растянуть изображение на весь блок?

Question

[xakslim]

Доброго времени суток!
Будет выводиться блок новостей вот в таком формате в несколько рядов. Картинки будут различных размеров и пропорций. По ТЗ размер блока с картинкой должен быть 390х290.
Не могу загнать изображение в блок. При изменении width, heigth,background-size картинка изменяется пропорционально и остаются либо пустое место, либо картинка растягивается.

html

<div class="nz-thumbnail press-block" style="background: url({{- article.image.url -}}) no-repeat ">
  <div class="ninzio-overlay">
      <a class="nz-overlay-before" title="View details" href="{{ url }}"></a>
  </div>
</div>

css

.......   
.nz-thumbnail {position: relative;}  
........     
.post .press-block {  
  height: 290px;  
}  
........

Comments

[Ankhena]

Для фона:
background-size: cover

Для картинок

height: auto;
object-fit: cover

Но картинки не совпадающие по пропорциям с контейнером, естественно, обрежутся.

[ProjectSoft]

В чём проблема ставить картинки именно в таком размере - 390х290 ?
Если вы верстаете, то делайте по ТЗ. А бэкэнд сделает свою работу по обработке изображений для вывода в данных блоках. И опишет правила для менеджеров, чтобы подгоняли картинки в пропорции 4х3.

[xakslim]

ProjectSoft, задача стоит перенести сайт с wp на djangо с некоторыми правками. Это страница новостей, в которых новости выстравиваются друг под другом. Изначально было так что грузили картинки и изза этого смещались все блоки внизу. И одна из правок - выровнять блоки в ряды. И на врятли ктото будет сидеть и менять размер изображений в редакторе до загрузки на сайи

[Ankhena]

xakslim, Если никто не подготовит картинки с правильными пропорциями, то они будут либо обрезаны либо растянуты либо будут поля либо разного размера. Всё.

Можно использовать сетку masonry и беспокоится только о ширине колонок.

[ProjectSoft]

xakslim, кто вам сказал, что нужно менять размеры в редакторе?
Тем более это WP.
Ещё раз - задача для back-end. Написать плагин, который будет ресайзить картинки под данный блок.
Усложняем, для back-end, проверяем существование перевьюшки изображения и если нет - ресайзим, сохраняем, отдаём путь. Всё делается стандартными API функциями WP из коробки.

Как видите, всё решается не в вёрстке, а на back-end. Плюс, для css описываете позицию и размер для background блока или для img тега, чтобы избежать возможные ошибки при ресайзе не подходящих пропорций изображений для данного блока.

[ProjectSoft]

xakslim, с djangо то же самое)) Нет проблем

[ProjectSoft]

xakslim, респонсив
https://jsfiddle.net/a465betf/

Answer 1

[Anton Filippov]

для картинки

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

для родителя
position: relative;