Блог

Главная - Вопросы по программированию - Изменение размера изображения дополнений на jumbotron с помощью bootstrap

Изменение размера изображения дополнений на jumbotron с помощью bootstrap

#css #image #resize

#css #изображение #изменение размера

Вопрос:

Может кто-нибудь мне помочь, я хочу создать свой веб-сайт портфолио, но в этом случае я хочу показать свою фотографию на jumbotron с помощью 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>

Ответ №1:

Из-за этой части кода все изображения внутри элемента carousel будут иметь высоту 100vh:

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

поэтому вам следует просто выбрать тот, который вам нужен. вы можете написать эти стили:

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



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

Комментарии:

1. спасибо, братан, это работа, но, к твоему сведению, карусель-класс предметов для фона jumbotron, а не вставка фотографии на jumbotron, это другое, но, спасибо, это работает