使用 bootstrap 调整超大屏幕上附加图片的大小

Question

有人可以帮助我吗，我想建立我的投资组合网站，但在这种情况下，我想使用 bootstrap 在超大屏幕上显示我的照片，您可以在下面看到我的示例：https://i.stack.imgur.com/W8xFE.jpg

我可以调整照片的大小吗，如果可以，怎么办？这是我的代码

<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

由于这部分代码，carousel-item 中的所有图像都将具有 100vh 高度：

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

所以你应该 select 你想要的那个。你可以写这样的样式：

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



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

使用 bootstrap 调整超大屏幕上附加图片的大小

Resize add ons picture on jumbotron using bootstrap

css

resize

image