使用引导程序在超大屏幕上调整附加图片的大小

Question

Can somebody help me, I wanna build my portfolio web, but in this case, I wanna show my photo on jumbotron using bootstrap, you can see my sample below: https://i.stack.imgur.com/W8xFE.jpg

can I resize the photo, if this can, how? here my code

 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/01.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h1 class="display-4">About Me</h1> <img src="img/user.png" id="profile"> <h2>TEXT HERE</h2> </div> </div> </div>

 /*jumbotron*/ .jumbotron{ /*background-image: url(../img/01.jpg);*/ background-size: cover; text-align: center; height: 760px; color: #fff; margin-top: -20px; } .display-4{ margin-top: 150px; } /*slider*/ .carousel-item img{ background-size: cover; display: flex; height: 100vh; } .carousel-item h1{ margin-top: -550px; text-align: center; font-size: 40px ; font-weight: bold; } .carousel-item p{ /*margin-top: -550px;*/ text-align: center; font-size: 36px ; font-weight: unset; }

 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/01.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h1 class="display-4">About Me</h1> <img src="img/user.png" id="profile"> <h2>TEXT HERE</h2> </div> </div> </div>

Answer 1

Because of this part of code, all the images inside carousel-item will have 100vh height:

.carousel-item img{
    background-size: cover;
    display: flex;
    height: 100vh;
}

so you should just select the one you want. you can write this styles:

.carousel-item > img{
    background-size: cover;
    display: flex;
    height: 100vh;
}



 .carousel-caption img{
  width: 200px; /* whatever you want*/
}