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/

ttest.css文件位于assets / css文件夹中... 关于我可能做错的任何提示？

Answer 1

您没有看到图像，因为.testclass的渲染高度为0px。

您需要将固定高度设置为.testclass或.item。但是，将固定高度设置为.item并将.testclass保留为100％会导致.testclass占据.item的整个高度，推动剩余的.item内容失落。

根据您之前的img元素判断，我猜这应该可行：

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

一些例子（假装绿色是你的背景图片）：
它目前的表现如何：jsfiddle
固定高度.item：jsfiddle
固定高度.testclass：jsfiddle

媒体查询bootstrap / ci应用程序失败

1 个答案: