Изображение не подходит внутри DIV

Question

Я пытаюсь разместить изображение внутри div. Моя проблема заключается в том, что это не соответствует изображению в div, изображение находится в div, это просто не подходит к div. Он отображается как часть изображения, потому что изображение больше, чем div. Может ли кто-нибудь помочь мне заставить его подогнать весь образ в div без его диспропорции? У меня есть следующие:

Markup

<div class="col-lg-2 col-md-4 col-sm-6 newClass"> 
     <div class="module img-responsive" style="background-image: url(Images/my_image.jpg);"> 
      <header> 
       <h1 style="font-size: 20px; text-align: center;">Text 
       </h1> 
       <h2 style="font-size: 13px; text-align: center;">Some more text 
       </h2> 
      </header> 
     </div> 
</div> 

CSS

/* Overlay text */ 
    .module { 
     /*background-color: #abc;*/ 
     background-attachment: fixed; 
     /*width: 400px;*/ 
     height: 300px; 
     position: relative; 
     overflow: hidden; 
    } 

     .module > header { 
      position: absolute; 
      bottom: 0; 
      left: 0; 
      width: 100%; 
      padding: 20px 10px; 
      background: inherit; 
      background-attachment: fixed; 
      overflow: hidden; 
     } 

      .module > header::before { 
       content: ""; 
       position: absolute; 
       top: -20px; 
       left: 0; 
       width: 200%; 
       height: 200%; 
       background: inherit; 
       background-attachment: fixed; 
       -webkit-filter: blur(4px); 
       filter: blur(4px); 
      } 

      .module > header::after { 
       content: ""; 
       position: absolute; 
       top: 0; 
       left: 0; 
       width: 100%; 
       height: 100%; 
       background: rgba(0, 0, 0, 0.25); 
      } 

      .module > header > h1 { 
       margin: 0; 
       color: white; 
       position: relative; 
       z-index: 1; 
      } 

      .module > header > h2 { 
       margin: 0; 
       color: white; 
       position: relative; 
       z-index: 1; 
      } 

Изображение

Answer 1

Я знаю, что это уже ответил, но вы можете предпочесть это решение лучше:

Demo

Это позволяет масштабировать изображение, но не растягивая его, как это обычно нежелательна.

Если изображение слишком велико, вы всегда можете добавить max-width, чтобы предотвратить это, если хотите.

HTML

<div class="col-lg-2 col-md-4 col-sm-6 newClass"> 
    <div class="module img-responsive" style="background-image: url('http://i.stack.imgur.com/NuEZ2.jpg');"> 
     <header> 
      <h1 style="font-size: 20px; text-align: center;">Text 
      </h1> 
      <h2 style="font-size: 13px; text-align: center;">Some more text 
      </h2> 
     </header> 
     <img src="http://i.stack.imgur.com/NuEZ2.jpg" style="visibility:hidden; width:100%; display:inherit"/> 
    </div> 
</div> 

CSS

/* Overlay text */ 
    .module { 
     background-size:cover; 
     background-repeat: no-repeat; 
     position: relative; 
     overflow: hidden; 
    } 

     .module > header { 
      position: absolute; 
      bottom: 0; 
      left: 0; 
      width: 100%; 
      background: inherit; 
      background-position: bottom; 
      overflow: hidden; 
     } 

      .module > header::before { 
       content: ""; 
       position: absolute; 
       left: 0; 
       width: 100%; 
       height: 100%; 
       background: inherit; 
       background-size: cover; 
       -webkit-filter: blur(4px); 
       filter: blur(4px); 
      } 

      .module > header::after { 
       content: ""; 
       position: absolute; 
       top: 0; 
       left: 0; 
       width: 100%; 
       height: 100%; 
       background: rgba(0, 0, 0, 0.25); 
      } 

      .module > header > h1 { 
       margin: 0; 
       padding: 10px 10px; 
       color: white; 
       position: relative; 
       z-index: 1; 
      } 

      .module > header > h2 { 
       margin: 0; 
       padding: 10px 10px; 
       color: white; 
       position: relative; 
       z-index: 1; 
      } 

Answer 2

у вас есть еще один класс с именем newClass, который вы не предоставили пометке для _ . Мне просто интересно, имеют ли у него соответствующие параметры, которые могут повлиять на результат класса .module?

Answer 3

Попробуйте

<div class="col-lg-2 col-md-4 col-sm-6 newClass"> 
     <div class="module img-responsive" style="background-image: url(Images/my_image.jpg);background-size:cover;"> 
      <header> 
       <h1 style="font-size: 20px; text-align: center;">Text 
       </h1> 
       <h2 style="font-size: 13px; text-align: center;">Some more text 
       </h2> 
      </header> 
     </div> 
</div> 

Answer 4

Вы должны установить фоновый размер для покрытия т.е. ...

.img-responsive{ 
    background-size: cover 
} 

Answer 5

Похоже, вы используете фоновое изображение здесь. Попробуйте установить размер фона для «содержать» или «обложка» в вашем классе модуля. Помните, что размер фона не поддерживается в более старых версиях Internet Explorer.

Answer 6

Вам необходимо удалить background-attachment: fixed и осуществить background-size следующим образом. Вот demo.

.module{ 
    background-size: 100% 100%; 
    /* other css */ 
}