如何裁剪而不拉伸滑块中的图像？我试过'背景：封面'

【问题标题】：How to crop not stretch an image in a slider? I've tried 'background:cover'如何裁剪而不拉伸滑块中的图像？我试过'背景：封面'
【发布时间】：2015-06-29 01:25:26
【问题描述】：

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

这是我认为正确代码所在的位置（没有图像，因为图像在我的帖子中找到），但我似乎无法让 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>

【问题讨论】：

• 你试过background-size: cover;吗？
• 是的！这很令人沮丧，因为我首先不知道它是否不起作用，因为我找不到需要放置它的位置，或者只是因为 background-size: cover; 不起作用。你知道它应该放在哪里吗？
• 我看过现场示例，background css 规则不起作用，因为 javascript 将实际图像插入到您的滑块中。处理图像使得在不裁剪/调整图像大小的情况下实现您需要做的事情变得很棘手。
• 该模板使用固定高度 (275px) 将其图像作为
• 项插入到滑块中。它不使用背景图像作为其来源。因此，您要么必须用不同的插件替换该滑块，要么对其进行一些操作以使其达到您想要的确切方式。该主题中的 css 也使用 !important 属性，因此除非将其删除，否则可能更难以实现。见这里：pasteboard.co/1z0LOJTK.png