0

好的，这是我的问题 - 我正在使用引导响应，一切都很好，直到用户使用小型平板电脑或手机 - 他们的图像太小 - 遵循 214 像素的 .box css - 我希望图像填充当用户在手机上查看但在桌面上看起来仍然相同时的屏幕空间......有什么想法吗？

我的 CSS 文件：

$navbarBackgroundHighlight: white;
$navbarBackground: white;
$btnPrimaryBackground: green;

@import 'bootstrap';
body{
    padding-top: 60px;
}

body{
    padding-left: 60px;
}




@import 'bootstrap-responsive';





.footer{
    margin-top: 50px;
    color: $grayLight;
    a{
        color: $gray;
    }
}

/* Required for jQuery Masonry */

.box {
    margin: 5px;
    padding: 5px;
    font-size: 11px;
    line-height: 1.4em;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 1px 1px 10px #444;
    width: 214px;

}

.box img {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.description {
    margin: 10px 0 5px;
}


#tag_cloud {
  width: auto;
  text-align: center;
  line-height: 1.6em;
  .s { font-size: 0.9em; color: #3B52A3 ;font-weight: italic; font-family: inherit }
  .ss { font-size: 1.2em; color: #118C4E ;font-weight: bold; font-family: inherit }
  .m { font-size: 1.8em; color: #005A31; font-weight: italic; font-family: inherit }
  .mm { font-size: 2.4em; color: #CE3927; font-weight: bold; font-family: inherit }
  .l { font-size: 3.0em; color: #B71427; font-weight: bold; font-family: inherit }
  .ll { font-size: 3.7em; color: #AECC23; font-weight: bold; font-family: inherit }

}

.hero-unit {
  background-image:url('http://s3.amazonaws.com/barnpix/pins/images/000/000/087/original/DSC00071.JPG?1375385330');
  background-size:cover;
  color: white;
  a:hover {
     color: #ABC147;
     text-decoration: underline;
}
  height:auto;
  opacity: 1.0;
}

和我的观点：

<%= render 'pages/home' %>



<div id="pins">
  <%= render @pins %>
</div>

<%= will_paginate @pins %>
4

0 回答 0