Question

The fullscreen slider image I put on my website seems partially cropped on various platforms (mobile, small screen, etc). I am trying to fit and stretch it on my homepage and would like it to look the same (with its fullsize) on any platform. Tried many methods according to my search on web, but couldn't find any solutions.

Here is the part of the code:

<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" >

Here is the related css part:

.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; }

Here is how it looks on mobile right now: Here is how it looks on chrome browser right now: Here is the real-size image:

Answer 1

您可以尝试'background-size：cover'。

<强>语法

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

附加的链接包含供您参考的示例代码。 https://jsfiddle.net/jv92788r/

希望这有帮助。

Answer 2

Not sure you can get a perfect result here but have you tried the backgound-size cover property? https://www.w3schools.com/cssref/css3_pr_background-size.asp

div {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

Answer 3

首先我会删除移动设备上的滑块，我的大多数客户都要求我删除较小分辨率上的滑块，因为滑块内容通常不像高分辨率那样可见。第二种解决方案是使用不同的滑块图像，以便更好地适应移动设备。现在横幅上的报价在360px这样的较小分辨率上并不明显。像1920这样的更高分辨率的问题是图像太小。例如，第一个图像是1200x600px，其他3个图像是1000x500px。默认滑块高度为745px。这就是图像看起来不太好的原因。尝试使图像更大以适应滑块容器，你应该完成一半问题：）

Fullscreen slider image appears cropped

3 个答案: