Блог

Главная - Вопросы по программированию - Адаптивный фон-изображения

Адаптивный фон-изображения

#html #css

#HTML #css

Вопрос:

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

Изображение исчезает с медиа-запросом и без него с разрешением 991 пикселей. Кроме того, единственный вариант сделать изображение во всю ширину — это обложка размером с фон.

Когда я использую ширину 100% (что сделало бы его отзывчивым), это действительно не работает. Затем изображение разделяется. То же самое для max-width:100% . Я понятия не имею, почему это не работает.

Мой код:

 body, html {
    padding:0px;
    margin:0px;
    font-family: 'TheSans Swisscom' !Important;
}
    
@media only screen and (min-width: 991px) {
    .col-md-3{
        width: calc(25% - 10px) !Important;
        margin-right:5px; 
        margin-left:5px;
        margin-top: 10px;
        background-color: white; 
        position:relative !Important; 
        font-family: TheSans Swisscom; 
        display: block;
        padding:0px !Important;
    }
}
    
a:link {
    color: black;
}    
    
a:visited {
    color: Black;
}    
    
.a {
    padding: 70px;
    position: relative;
    right: -5%;
}

a {
    color: black !important;
}

.center-block {
    width: 100%;
}

h2 {
    font-size:30px;
    margin: 0 0 auto;
    width: 9em;
    text-align: center;
}

.ptags {
    line-height: 1.2;
    padding: 5px;
}

.button {   
    margin-right: 10px;
    height: 45px;
    width: 45px;
    background-color: black;
    font-size: 60px;
    color: white;
    text-align: center;
    line-height: 45px;
    bottom: 10px;
    cursor: pointer;
    z-index: 1;
    font-family: TheSansSwisscom; 
    position: relative;
    right: -98%;
    top: -308px;
}

.ktm {
    text-align: center;
}

.h1{
    font-size: 36px;
    text-align: center;
}

h2 {
    font-size:30px;
    margin: 0 0 auto;
    width: 9em;
    text-align: center;
}

.img-center{
    display: block;
    margin:0 auto;
}

a:link {
    color: black;
}

.row{
    display:block;
}

@media only screen and (min-width: 991px){
    .img {
        background-image: url('https://pbs.twimg.com/profile_images/3396462371/53b106cad4de869739517b1ff5d75429.jpeg');
        background-size: cover;
        background-repeat: no-repeat;
    }
}

.container{
    width: 100% !important;
    padding: 100px;
}

.cardContainer {
    width: 1200px;
    position: relative;
    margin-left: calc( 50% - 600px);
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <section class="container img">   
        <h1 class="h1 a"><a name="Details">Details</a></h1>
        <div class="button">
            <p> </p>
        </div>
        <div class="cardContainer">
            <div  class="col-md-3  col-xs-12">
                <img class="center-block"src="http://farm8.static.flickr.com/7411/8725728890_b056a881c5_m.jpg" alt="thirdimage">
                <h2 class="Details">Details</h2>
                <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p>
            </div>
            <div id=cardPrototype class="col-md-3 col-xs-12">
                <img class="center-block"src="http://farm2.static.flickr.com/1577/26053634152_9a7d5b3580_m.jpg" alt="thirdimage">
                <h2>Details</h2>
                <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p>
            </div>
            <div class="col-md-3 col-xs-12">
                <img class="center-block"src="http://farm8.static.flickr.com/7250/7445511584_9079770764_m.jpg" alt="thirdimage">
                <h2>Details</h2>
                <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p>
            </div>
            <div class="col-md-3 col-xs-12">
                <img class="center-block"src="http://farm9.static.flickr.com/8540/8668499106_36a8b6cab8_m.jpg" alt="thirdimage">
                <h2>Details</h2>
                <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p>
           </div>
       </div> 
   </section>

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

1. поделитесь своим HTML. Вы пробовали добавить класс html img-responsiv ‘?

2. «В моем коде я также использую bootrap», я думаю, он имеет в виду Bootstrap

3. Может быть, вы хотите что-то подобное ?

4. @ZombieChowder Да, я пробовал это. Это действительно не имеет значения. Я думаю, что проблема связана с карточками в моем html. Они не реагируют на

5. хорошо, так какое изображение не реагирует, сами карты или? Потому что я вижу 4 изображения, которые вы пытаетесь разместить.

Ответ №1:

Насколько я мог понять из вашего вопроса, надеюсь, это решит проблему, с которой вы столкнулись 

  background-repeat: no-repeat;

Ответ №2:

Я не уверен, что это то, чего вы хотите, но взгляните.

 .img {
  background-image: url('https://pbs.twimg.com/profile_images/3396462371/53b106cad4de869739517b1ff5d75429.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}

.center-block{
  width:100%;
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container img">
  <h1 class="h1 a"><a name="Details">Details</a></h1>
  <div class="button">
    <p> </p>
  </div>

  <div class="cardContainer">
    <div class="col-md-3  col-xs-12">
      <img class="center-block" src="http://placehold.it/220x150" alt="thirdimage">
      <h2 class="Details">Details</h2>
      <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p>
    </div>
    <div id=cardPrototype class="col-md-3 col-xs-12">
      <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage">
      <h2>Details</h2>
      <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p>
    </div>
    <div class="col-md-3 col-xs-12">
      <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage">
      <h2>Details</h2>
      <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p>
    </div>
    <div class="col-md-3 col-xs-12">
      <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage">
      <h2>Details</h2>
      <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p>
    </div>
  </div>
</section>

Но, вероятно, вы хотите использовать background-size: cover; с background-repeat: no-repeat; это сделало бы его абсолютно отзывчивым

Я изменил фрагмент кода

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

1. Приятно, что я хочу, чтобы изображения были такими. Но текст все равно должен быть на одной карточке. Я добавил немного css к своему вопросу. Пожалуйста, проверьте это. я установил для своих изображений в карточках ширину 100%, если я сделаю это с вашим кодом 240×150, изображение не останется на карточке, если вы уменьшите окно.

2. .центральный блок { ширина: 100%; } ?

3. ширина: 100% дает изображение на 100% внутри карты. Проблема в том, что мой стиль карты исчезает, когда изображение становится меньше. Таким образом, изображение становится чрезвычайно большим

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