中心底部图像 CSS 和 HTML

Question

I'm trying to center bottom the image of the person, also I need to make it responsive. I tried different methods but it seems is not working, could you help me out with this please? I'm attaching an image as a reference. Thanks.

 .content-section { height: 80vh; background-image: url("https://media-exp1.licdn.com/dms/image/C561BAQHkRX0CouHDLw/company-background_10000/0/1575288490228?e=2159024400&v=beta&t=4d6L5ldeRu30uZNDQYydkL_tpLP6AEEx6ATq7LF9WGo"); background-position: center; background-repeat: no-repeat; background-size: cover; display: grid; justify-items: center; align-items: center; }.content-section img { position: absolute; width: 50%; bottom: EDGE; }

 <section class="content-section"> <img class="img-responsive" src="https://pierpoint.com/wp-content/uploads/Manufacturing-Recruitment-Image-RPO-Pierpoint-International-2-min.png"> </section>

Answer 1

I prefer to use flex.

.content-section {
    height: 80vh;
    background-image: url("https://media-exp1.licdn.com/dms/image/C561BAQHkRX0CouHDLw/company-background_10000/0/1575288490228?e=2159024400&v=beta&t=4d6L5ldeRu30uZNDQYydkL_tpLP6AEEx6ATq7LF9WGo");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.content-section img {
    width: 50%;
}

Learn more on flex here .

Answer 2

Try this:

 .content-section { height: 80vh; background-image: url("https://media-exp1.licdn.com/dms/image/C561BAQHkRX0CouHDLw/company-background_10000/0/1575288490228?e=2159024400&v=beta&t=4d6L5ldeRu30uZNDQYydkL_tpLP6AEEx6ATq7LF9WGo"); background-position: center; background-repeat: no-repeat; background-size: cover; display: grid; justify-items: center; align-items: center; }.content-section img { width: 50%; display: block; margin: auto; }

 <section class="content-section"> <img class="img-responsive" src="https://pierpoint.com/wp-content/uploads/Manufacturing-Recruitment-Image-RPO-Pierpoint-International-2-min.png"> </section>