如何裁剪不拉伸滑块中的图像？我试过了 'background:cover'

Question

我已经开始编辑一个预制的 Blogger/Blogspot 模板（作为一个业余爱好者！！），并且在一个特色滑块上的帖子中看到了一些照片，这些照片可以拉伸以适应滑块并且看起来很糟糕。这是我下载文件的原始模板网站：Sora Templates - 'Blogging'，在示例中看起来很棒。除了我的照片没有设置尺寸，我需要很长时间才能将它们都裁剪成相同的尺寸。

这是我认为正确代码所在的位置（没有图片，因为图片是在我的帖子中找到的），但我似乎无法 Background-size: cover; 工作，也无法 'clip'。有没有办法自动裁剪它们？

.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" class 覆盖放置图像的高度和宽度。 http://pasteboard.co/1z2hCJkX.png

从技术上讲，如果您可以进入该代码，如果它是一个插件或脚本，而不是使用 <img> 源，并在 <a> 中添加背景图像设置 class 将你想要的图像加载到自身中，然后你可以使用背景大小的封面。

但是，如果我自己没有第一手访问该文件或主题，我目前能做的差不多就是这些了。 =) 我建议寻求帮助，看看是否有人可以更改 plugin/script 以使用背景 img 而不是在滑块中放置实际图像。

如何裁剪不拉伸滑块中的图像？我试过了 'background:cover'

How to crop not stretch an image in a slider? I've tried 'background:cover'

html

css

image

slider

stretch