Question

我有这个网站：

在底部有两个图像，遗憾的是这些图像无法完全看到。

您可以在新标签页中打开原始图片，以确切了解它的外观。

对我而言，它可以看到大约90％的图像

代码HTML：

<div class="entry-content" style="height: 391px;">
        <div class="sus"></div>
        <div class="jos"></div>
        <div class="jos2"></div>
</div>

CODE CSS：

.sus{
  width:100%;
  height: 60%;
  position:absolute;
  top:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/BANNER-300x215.png") no-repeat center center #B03D3D;
  background-size:cover;
}

.jos{
  width: 50%;
  height: 40%;
  position:absolute;
  bottom:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS2-300x246.png") no-repeat center center #B03D3D;
  background-size: cover;
}

.jos2{
  width: 50%;
  height: 40%;
  position:absolute;
  bottom:0;
  right:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS1-300x246.png") no-repeat center center #B03D3D;
  background-size: cover;
}

所以我想做照片......你告诉我有什么问题以及如何解决这个问题让图片看完了？

提前致谢！

Answer 1

要查看完整图片，请更改您的CSS：

而不是background-size: cover;使用background-size: contain;，您将完全看到它。

问题是图像左右边框。

Answer 2

尝试100％background-size喜欢，

.jos{
   ...
   background-size: 100% 100%;
}

.jos2{
   ....
   background-size: 100% 100%;
}

Answer 3

值background-size的{{1}} css属性不会显示完整的图像。

将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能无法在背景定位区域内查看 - 来源：W3Schools

因此，如果您需要完整的图像使用

cover

现场演示@ W3Schools：http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

如何在后台查看完整图像？

3 个答案: