javascript - 全屏 slider 图像出现裁剪

Question

我放在我网站上的全屏 slider 图像在各种平台(手机、小屏幕等)上似乎被部分裁剪了。我试图在我的主页上调整和拉伸(stretch)它，并希望它在任何平台上看起来都一样(全尺寸)。根据我在网上的搜索尝试了很多方法，但找不到任何解决方案。

部分代码如下:

<section class="bannercontainer">
        <div class="fullscreenbanner-container">
            <div class="fullscreenbanner">

                <ul>
                    <li data-transition="parallaxvertical" data-slotamount="5" data-masterspeed="1000" data-title="Slide 1">
                        <img src="~/img/index/slider/slider-05.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center" data-bgrepeat="no-repeat" >

这是相关的CSS部分:

.fullscreenbanner-container {
  width: 100%;
  position: relative;
  padding: 0; }
  .fullscreenbanner-container .tp-bullets.preview4 {
    opacity: 1 !important;
    height: auto !important; }
    @media (min-width: 992px) {
      .fullscreenbanner-container .tp-bullets.preview4 {
        bottom: 30px !important; } }
  .fullscreenbanner-container .tp-bullets.preview4 .bullet {
    background: rgba(255, 255, 255, 0.5) !important;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: none !important;
    width: 6px !important;
    height: 6px !important;
    border: 2px solid rgba(255, 255, 255, 0) !important;
    display: inline-block;
    margin-right: 14px !important;
    margin-left: 0 !important;
    margin-bottom: 0px !important;
    -webkit-transition: background-color 0.2s, border-color 0.2s;
    -moz-transition: background-color 0.2s, border-color 0.2s;
    -ms-transition: background-color 0.2s, border-color 0.2s;
    -o-transition: background-color 0.2s, border-color 0.2s;
    transition: background-color 0.2s, border-color 0.2s;
    float: none !important; }
  .fullscreenbanner-container .tp-bullets.preview4 .bullet:hover, .fullscreenbanner-container .tp-bullets.preview4 .bullet.selected {
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0) !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid white !important;
    margin-right: 10px !important;
    margin-left: -4px !important;
    margin-bottom: -3px !important; }
  .fullscreenbanner-container .tparrows.preview4 .tp-arr-iwrapper {
    display: none !important; }

这是它现在在移动设备上的样子: 这是它现在在 chrome 浏览器上的样子: 这是实际尺寸的图像:

Answer 1

你可以试试'background-size: cover'。

语法

background-size: auto|length|cover|contain|initial|inherit;

所附链接包含示例代码供您引用。 https://jsfiddle.net/jv92788r/

希望这对您有所帮助。