如何在滑块中裁剪而不拉伸图像？我试过“背景:掩护”

Question

我已经开始编辑一个预先制作好的博客/博客模板(作为一个业余爱好者！！)，并且在一个功能强大的滑块上看到了照片，这个滑块适合滑块，看起来也很糟糕。这里是我下载文件的原始模板网站：Sora模板-“博客”，在这个例子中它看起来非常棒。除了我的照片没有设定大小，我要花很长时间才能将它们全部裁剪到相同的尺寸。

这里是我认为正确的代码定位的地方(没有图像，因为在我的帖子中可以找到图像)，但我似乎无法让Background-size: cover;工作，也没有“剪辑”。有办法自动剪掉它们吗？

​

.related-posts{
margin:0 0% 0 0%;
background:#fff;
}
#related-posts{
border-top:1px solid #CCC;
position:relative;
padding-top:.51em;
}
.related-posts img{
border:1px solid #DEDEDE;
}
h2.relatedpost{
position:absolute;
top:-15px;
padding:0 5px 0 0;
text-indent:15px;
background:#FFF;
margin-bottom:0
}
.related-content{
float:left;

}
.related-content{}
.relatedtitle{
color:#414141;
font-variant:small-caps;
font-weight:bold;
font-size:17px!important;
}
.slider{
height: 382px!important;
  padding: 10px 10px 10px 10px;
  border: 1px solid #6d6e71;
}

.large-category-header {
  margin-left: -30px;
  margin-top: 38px;
  position: absolute;
  width: 100%;
  z-index: 99999;
}

ul.bjqs{
position:relative;
list-style:none;
padding:0;
margin:0 0px 0;
overflow:hidden;
height:385.333333px!important;
width:100%!important;
display:block!important;
}
li.bjqs-slide{
position:absolute;
display:none;
list-style:none;
height:99%!important;
width:99.5%!important;
}
ul.bjqs-controls{
list-style:none;
margin:0;
padding:0;
z-index:9999;
}
li.slider-content img{
width:100%;
}
ul.bjqs-controls.v-centered li.bjqs-prev a,ul.bjqs-controls.v-centered li.bjqs-next a{
display:none;
}
ol.bjqs-markers{
list-style:none;
padding:0;
margin:0;
width:100%;
}
ol.bjqs-markers.h-centered{
  margin-top: -34px;
  position: relative;
  height: 15px;
  padding: 7px 4px 7px 4px;
  text-align: center;
  width: 98%;
  background: cover;
  overflow: hidden;
  left: 0px !important;
}
ol.bjqs-markers li{
display:inline;
}
ol.bjqs-markers li a{
display:inline-block;
}
ul.bjqs-controls.v-centered li a{
display:none;
}
ul.bjqs-controls.v-centered li a:hover{
background:#000;
color:#fff;
}
.featured-title{
  position: absolute;
  bottom: 35px;
  width: 93.5%;
  background: rgba(0, 0, 0, 0.5);
  font-weight: 600;
  font-size: 25px;
  font-family: 'Georgia', serif;
  font-weight: 300;
  padding: 20px;
  text-transform: capitalize;
  text-align: center;
}
.featured-posts-section{
background:#f9f9f9;
border-bottom:1px solid #ddd;
padding-top:20px;
overflow:hidden;
}
.featured-title a{
color:#fff;
}
.status-msg-wrap{display:none;}
.fpimg{
width:100% !important;
height:380px;
}
ol.bjqs-markers li a{
background: #fff;
color: #fff;
margin: 5px;
height: 10px;
border-radius: 240px;
text-decoration: none;
width: 10px;
}
ol.bjqs-markers li.active-marker a,
ol.bjqs-markers li a:hover{
background:#F26F6F;
}
p.bjqs-caption{
background:rgba(255,255,255,0.5);
}

<div class='slider' id='slider'>
<div class='large-category-header'><img alt='Featured' src='http://i1329.photobucket.com/albums/w557/iSharnie/sites%20stuff%202/featured_zpsvedkkd5i.png'/></div>
<ul class='bjqs'>
<script type='text/javaScript'>
//<![CDATA[
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showhomeposts1\"><\/script>");
//]]></script>
</ul>
</div>

​

Answer 1

我不认为脚本实际上控制了滑块及其图像的高度，就像CSS被放置到索引中一样(动态地)显示了"fpimg“类，它覆盖了放置的图像的高度和宽度。http://pasteboard.co/1z2hCJkX.png

从技术上讲，如果您能够进入该代码，如果它是一个插件或脚本，而不是使用<img>源代码，并且在<a>中添加一个背景图像设置，加载您想要的图像，那么您就可以使用背景大小的封面。

但是，如果不能亲自直接访问该文件或主题，我目前所能做的就只有这么多了。)我建议伸出援助之手，看看是否有人可以改变这个插件/脚本来使用背景img，而不是在滑块中放置一个实际的图像。