медиа-запрос для загрузки bootstrap/ci

Question

Я пытаюсь изменить некоторые изображения в своем коде для использования классов ... чтобы я мог создавать медиа-запросы. Первым шагом для меня было «переместить» изображение из моего представления в файл css.

Я пытаюсь заменить этот код на мой взгляд: (этот код работает)

94   <div class="item"> 
95   <img src="assets/images/outside/front2.jpg" width="100%" height="300px" alt=""> 
96   <div class="container"> 
97    <div class="carousel-caption"> 
98    <h1>Welcome to the test site</h1> 
99    <p></p> 
100    <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">push me</a></p>--> 
101    </div> 
102   </div> 
103   </div> 

с этим:

94   <div class="item"><div class="testclass"></div> 
95   <!-- <img src="assets/images/outside/front2.jpg" width="100%" height="300px" alt=""> --> 
96   <div class="container"> 
97    <div class="carousel-caption"> 
98    <h1>Welcome to the test site</h1> 
99    <p></p> 
100    <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">push me</a></p>--> 
101    </div> 
102   </div> 
103   </div> 

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

29  <!-- Custom styles for this template --> 
30  <link href="assets/css/carousel.css" rel="stylesheet"> 
31  <link href="assets/css/ttest.css" rel="stylesheet"> 

И ttest.css выглядит следующим образом:

1 /* ### Media queries #### */ 
    2 .testclass { 
    3 height: 100%; 
    4 background-image: url(../images/outside/front2.jpg); 
    5 background-repeat: no-repeat; 
    6 background-size: contain; 
    7 background-position-x: center; 
    8 } 

Но изображение не будет отображаться. Я ничего не вижу в окне разработчиков F12, чтобы сказать, что есть ошибка.

файл структура выглядит так:

dl@testbox [~/public_html/testapp.com/assets]$ ls -lah 
total 24K 
drwxrwxrwx 6 dl dl 4.0K Mar 24 16:52 ./ 
drwxrwxr-x 6 dl dl 4.0K Mar 25 03:43 ../ 
drwxrwxrwx 2 dl dl 4.0K Mar 26 18:01 css/ 
drwxrwxrwx 2 dl dl 4.0K Mar 24 16:48 fonts/ 
drwxrwxrwx 4 dl dl 4.0K Mar 24 16:52 images/ 
drwxrwxrwx 2 dl dl 4.0K Mar 24 16:52 js/ 

The ttest.css файл находится в папке активов/CSS ... Любые советы о том, что я могу делать неправильно?

Answer 1

Вы не видите изображение, так как высота изображения .testclass равна 0px.

Вам необходимо установить фиксированную высоту до .testclass или до .item. Однако установка фиксированной высоты до .item и оставление .testclass при 100% приведет к тому, что .testclass займет всю высоту .item, нажав остальную часть .item.

Судя по предыдущему элементу IMG, я бы предположил, что это должно работать:

.testclass { 
    height: 300px; 
    ... 
} 

Некоторые примеры (изобразите зеленый цвет фонового изображения):
Как он ведет себя в настоящее время: jsfiddle
с фиксированной высотой на .item: jsfiddle
с фиксированной высотой в .testclass: jsfiddle