Блог

Главная - Вопросы по программированию - Соедините рамку и картинку вместе

Соедините рамку и картинку вместе

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

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

Моя разметка html:

 <!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
    <!-- about img column -->
    <div class="col-md-6  about-picture height-80 img-responsive "></div>
    <!-- about text column -->
    <div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->  
<div class="about-text-center">
    <!-- title -->
    <div class="row">
    <div class="col text-center">
    <h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
    <div class="title-underline bg-warning"></div>
    <p class="mt-2 text-capitalize">hi  it is a test</p>
    </div>
</div>
<!-- end of title -->
<!-- single item -->
                            
</div>  
</div>      
</div>  
</div>
</section>

Это мой CSS:

 body {
    font-family: 'Roboto', sans-serif;
}

.height {
    min-height: 100vh;
}

.title-underline {
    width: 200px;
    height: 5px;
    margin: 0 auto;
}

.height-80 {
    min-height: 100vh;
}

.height-11 {
    max-height: 11vh;
}

.about-picture {
    background: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
}

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

1. Не могли бы вы добавить фрагмент, показывающий проблему? На данный момент я не могу видеть, где изображение отображается в вашем HTML.

2. Я отредактировал его, спасибо, если проверите еще раз

3. Он запрашивал фрагмент. Сейчас я его не вижу.

Ответ №1:

Вы можете использовать фоновое изображение, как вы это делали, но вам нужно задать ему размер и положение и остановить его повторение, иначе он просто выбирает значения по умолчанию для этих значений.

Вот что нужно добавить в ваш CSS. Я намеренно явно установил каждое значение, чтобы было легче видеть, что происходит:

 .about-picture {
background-image: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}

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

Ответ №2:

После того, как я увижу ваш код, возможно, я не думаю, что вы сможете поместить изображение в css, если оно используется таким образом. Я изменил ваш код в разделе css в .about-picture .

И я также изменил разметку html в этом разделе:

 <div class="col-md-6 about-picture">
  <img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>

Как это отредактировано мной:

 <html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <style>
            body{
            font-family: 'Roboto', sans-serif;
            width: 100%;}

                .height{
            min-height: 100vh;}       

                .title-underline{

            width: 200px;
            height: 5px;
            margin: 0 auto;}


                .height-80{
            min-height: 100vh;}

                .height-11{
            max-height: 11vh;}

                    .about-picture{
                        align-items: center!important;
                    }
                .about-picture img{
                width: 100%;
                
                position: relative;
                padding-top: 120px;
                }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
  <title>Document</title>
</head>
<body>
     <!-- about section -->
     <section id="about" class="bg-secondary">
        <div class="container-fluid">
        <div class="row">
            <!-- about img column -->
            <div class="col-md-6 about-picture">
                <img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
            </div>
            <!-- about text column -->
            <div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
        <!-- this is for centering -->
        <div class="about-text-center">
            <!-- title -->
            <div class="row">
            <div class="col text-center">
            <h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
            <div class="title-underline bg-warning"></div>
            <p class="mt-2 text-capitalize">hi  it is a test</p>
            </div>
        </div>
        <!-- end of title -->
        <!-- single item -->
                                    
        </div>  
            
        </div>      
            
        </div>  
        </div>
            </section>  
</body>
</html>