Question

我刚刚安装了一个包含滑块的博客模板。该模板来自：

sight-soratemplates.blogspot.com

正如您从滑块中看到的那样，图像是整页宽度，但是我用它们替换它们的图像大约是宽度的一半，但它不是按原样显示图像，而是重复它们以覆盖整个宽度。页面。

我该怎么改变？我是html编码的完全初学者。我希望滑块能够自动适应每个图像。

滑块的html代码以及1张图片是：

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='slider' style='overflow:hidden;'>
     <div class='fullwidth flexslider' id='homeslider'>
          <ul class='slides'>
               <li data-height='500' style='position:relative; background: url(http://x.jpg) 50% 0'>
                    <div class='caption_wrapper'>
                         <div class='caption'>
                              <h3><a href='#'>Random Title</a></h3>Random Caption<a href='#'>Read more </a>
                         </div>
                    </div>
               </li>

Answer 1

那是因为background image确实在重演。您可以通过向所有图片添加no-repeat来避免这种情况。

例如，你有这个：

element.style {
    background: url("https://lh3.googleusercontent.com/-X29Krwb_fbQ/UcMfaRJm_TI/AAAAAAAAB2Y/QaQkIwWMZ5c/s1600/9d.jpg") repeat scroll 50% 0 rgba(0, 0, 0, 0);

将其更改为

element.style {
    background: url("https://lh3.googleusercontent.com/-X29Krwb_fbQ/UcMfaRJm_TI/AAAAAAAAB2Y/QaQkIwWMZ5c/s1600/9d.jpg") no-repeat scroll 50% 0 rgba(0, 0, 0, 0);

PS：您的网站看起来很棒。

Flexslider DISABLE全宽显示，自动调节

1 个答案: