использовать фоновое изображение, а изображение сверху не работает должным образом

Question

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

Мне удалось это сделать:

when I try to use the top-margin on the image, it move the image but also expend the background the image and I do not want this. I am looking to get this :

I notice that in my code, the image seems being repeated instead of just fit/cropped.

below is the code:

class Profiles extends React.Component{

    render(){
        return(
             profileImg  еще   )}} 

и css

.profile-container {
        margin-top: 3rem;
        margin-bottom:5rem;

}

.profile-header {
    width: 70% ;
    height: 5% ;
    max-height: 25rem;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
    border-radius: 20px;
}


.profile-header-image-user {
    border-radius: 150px;
    width: 130px;
    height: 130px;
    margin-left: 5%;
    margin-top: 15%;
}

.profile-content {
    width: 60%;
    background-color: green;
    margin-left: auto;
    margin-right: auto;
}

Моя цель - иметь возможность отображать баннер и профиль pi c, как показано на втором рисунке, и сохранить этот рендер при изменении размера экрана.

Есть ли у меня идеи, чтобы можно было переместить профиль pi c, влияя на размер баннера?

Спасибо

Answer 1

Вам нужно сделать родительский position:relative и дочерний элемент (профиль pi c) как position:absolute. Затем вы можете установить top left right или bottom. Я использовал перевод, хотя вы также можете использовать bottom:-50px; box-sizing:border-box, но думаю, что преобразование - лучший вариант здесь

.banner {
  position: relative;
  height: 200px;
  width: 100%;
  background: url("https://i.imgur.com/T8YRjiQ.jpeg");
  background-size: 100% 100%;
  margin-bottom: 55px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px #222;
  border: 5px solid silver;
  box-sizing: border-box;
}

.profile {
  position: absolute;
  height: 156px;
  width: 156px;
  border: 5px solid silver;
  border-radius: 50%;
  bottom: 0;
  left: 50px;
  transform: translateY(50%);
  box-shadow: inherit;
}

<div class="banner">

  <img class="profile" src="https://i.imgur.com/LxxvbbL.png" />

</div>

Answer 2

попробуйте использовать абсолютное позиционирование:

.profile-header { position: relative }
.profile-header > img { top: 200px; left: '200px; }

Answer 3

Использование атрибутов позиции.

.profile-header {
    position: relative;
    width: 70% ;
    height: 5% ;
    max-height: 25rem;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
    border-radius: 20px;
}

.profile-header-image-user {
    position: absolute;
    border-radius: 150px;
    width: 130px;
    height: 130px;
    left: 5%;
    top: 15%;
}

Извините, я не тестировал, но считаю, что это хороший трек.

Answer 4

Вы можете установить положение баннера как position:absolute;, затем вы можете установить положение профиля как position:relative;, затем внутри профиля вы можете переместить изображение, установив разные значения верхнего т. Е. top:5px и левого, т. Е. left:20px другие внизу и справа.