原图封面正在缩放

我有一张图片，我必须用它来填写目录的全图封面图片。图片是3680 * 2456px。当我在我的代码中设置图片时，图片变焦，这意味着我可以看到图片的一半。因此，我试图将其重新调整为1024 * 683像素，因此我的照片填满了横幅的一半。原图封面正在缩放

如何让我的照片适合我的横幅，因此不会缩放？

.fullscreen { 
 
     width:100%; 
 
     min-height:100%; 
 
    \t background-repeat:no-repeat; 
 
     background-position:50% 50%; 
 
     background-position:50% 50%\9 !important; 
 
     background-image:url(/img/seminar/bg.jpg); 
 
     background-size 
 
    } 
 
    .overlay { 
 
     background-color: rgba(0, 0, 0, 0.5); 
 
     position: relative; 
 
     width: 100%; 
 
     height: 100%; 
 
     display: block; 
 
    }

<div class="fullscreen landing parallax"> 
 
      <div class="overlay"> 
 
       <div class="container"> 
 
        <div class="row"> 
 
         <div class="col-md-7"> 
 
          <!-- /.logo --> 
 
          <div class="logo"><a href="https://site.dk/"><img src="http://site.dk/img/site-logo-white.png" alt="logo"></a></div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
    </div>

来源

2016-08-25 KrMa

尝试：

.fullscreen { 
     background: url(/img/seminar/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    }

，而不是原来的.fullscreen CSS。

这段代码可以通过CSS技巧网站找到。

来源

2016-08-25 07:58:22 Option

谢谢你很多关于你的答案。图片现在放大了一些。我只是想尝试调整图片的像素大小。也许这可能会给最后的 – KrMa

没有，没有做任何事情调整到1840像素。你有其他想法吗？ – KrMa

我已经用完全相同尺寸的图像测试过了，它不会导致缩放。你可以在代码中添加'max-width：1840px;'。 – Option

这应该工作。图像的高度和宽度设置为100％

<img src="http://site.dk/img/site-logo-white.png" alt="logo" style="width: 100%; height: 100%;" />

编辑：要做到这一点在CSS试试这个

.fullscreen img { 
    width: 100%; 
    height: 100%; 
}

来源

2016-08-25 08:00:04

你好。感谢您的评论。我想用CSS来做。我只是试图做到这一点，但它仍然没有工作：'.fullscreen {0} {0} {0}最小高度：100％; \t background-repeat：no-repeat; background-position：50％50％; background-position：50％50％\ 9！important; background-image：url（/img/seminar/bg.jpg）; 身高：100％; 宽度：100％; }' – KrMa

原图封面正在缩放

回答

相关问题