#css
Вопрос:
Как центрировать изображение по вертикали во время использования object-fit: cover ? Я бы хотел, чтобы изображение всегда составляло 100% ширины его контейнера, а верхняя и нижняя части изображения обрезались, когда высота контейнера меньше высоты изображения. object-fit: cover по умолчанию обрезается только нижняя часть изображения. В приведенном ниже примере я хочу, чтобы центр изображения всегда находился непосредственно за текстом.
header {
max-height: 20em;
position: relative;
}
h1 {
position: absolute;
text-align: center;
top: 0;
transform: translateY(-50%);
width: 100%;
}
img {
object-fit: cover;
opacity: 0.2;
z-index: -1;
} <header>
<h1>Page Title</h1>
<img src=https://upload.wikimedia.org/wikipedia/commons/9/92/Widdringtonia_whytei_Mulanje_Malawi.jpg>
</header> Комментарии:
1. Я не уверен, какой вы хотите видеть макет. Должен ли текст (в данном случае только h1) располагаться вертикально по центру в элементе заголовка? Почему перевод(-50%) на нем?
Ответ №1:
Ознакомьтесь object-position с документами MDN.