Diplaying только центр изображения на данной высоте и ширине? - PullRequest
Новая
       3

Diplaying только центр изображения на данной высоте и ширине?

0 голосов
/ 26 марта 2020

Когда медиум отображает список карточек с записями в блоге, на каждой карточке отображается изображение заголовка, и оно на всю ширину, но центр его вырезан.

Медиум делает это, обрезая верхнюю часть и нижнюю часть каждого изображения, чтобы они все были одинакового размера, как это:

enter image description here

Можно ли сделать то же самое с чистым CSS , Это должно работать для изображений разного размера. Например, одно изображение может иметь высоту 500 пикселей, а другое 1000 пикселей и одинаковую ширину, и мы хотим отображать только центр 200 пикселей на всю ширину. изображение последовательно внутри карт. Вот как выглядят карты Medium:

enter image description here

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

1 Ответ

2 голосов
/ 26 марта 2020

Вы можете установить изображение в качестве фонового изображения для div, например, так: 

<div class="background-image"></div>

Вы можете стилизовать div, используя фоновые CSS правила, которые позволяют больше смотреть на то, как выглядит ваше изображение, масштабирование и позиционирование. 

.background-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image:url('../assets/your-image.svg');
  min-height: 250px;
  width: 100%;
}

Как показано, с помощью этого класса вы также можете go включить, чтобы установить min-height и другие свойства, как вам угодно, для создания изображений карт, которые стандартизированы.

...