在DIV中将图像作为包含高度小于除法的背景（不同）

Question

需要在小div中准确地适应更大的背景图像。当我使用background-size：cover;图像不完全适合。原因是我将div设为400px高度和宽度100％。

在小型设备中，它可以正常工作。

当我调整大屏幕时的方式相同，它无法适应div。

制作过程： 请在下方检查，并将输出窗口调整为更小和更大。 Fiddle

original image link

代码：

＆＃13;

＆＃13;

#imagecontainer {
    
    background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
    height:400px;
    width:100%;
    border: 1px solid;
    
     -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position:center center;
}

＆＃13;

<div id="imagecontainer">
  hi
  dadsa
  <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：我尝试了堆栈溢出中提到的所有答案。没有人有身高。但是我的div有高度。所以，请向下投票我的问题，即使检查我的代码，让我知道为什么我无法在div中拟合图像。

Answer 1

设置background-image size to 100% 100%，即它的高度和宽度，这样就可以在mobile devices和large screen上看起来相同，但在大屏幕上看起来有点拉伸。

  

background-size：cover - 尽可能大地缩放图像   保持图像宽高比（图像不会被压扁）。图片   “覆盖”容器的整个宽度或高度。当图像   和容器有不同的尺寸，图像也被剪裁   左/右或上/下。

cover对background-image缩放图片的属性值break points，这就是为什么它在其他#imagecontainer { background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat; height:400px; width:100%; border: 1px solid; background-position:center center; background-size:100% 100%; }看起来不同的原因。

<div id="imagecontainer">
  hi
  dadsa
  <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div>
</div>

 if($_REQUEST['action'] == 'addToCart' && !empty($_REQUEST['id'])){
        $productID = $_REQUEST['id'];
        // get product details
        $query = $db->query("SELECT * FROM products WHERE id = ".$productID);
        $row = $query->fetch_assoc();
        $itemData = array(
            'id' => $row['id'],
            'name' => $row['name'],
            'price' => $row['price'],
            'qty' => 1
        );

        $insertItem = $cart->insert($itemData);
        $redirectLoc = $insertItem?'viewCart.php':'index.php';
        header("Location: ".$redirectLoc);
    }

Answer 2

您可以使用带背景颜色的透明png图像。

#imagecontainer {
    
    background:rgb(125,126,125)  url("https://upload.wikimedia.org/wikipedia/commons/2/2a/Wikipe-tan_in_navy_uniform2_transparent.png") no-repeat;
    height:400px;
    width:100%;
    border: 1px solid;
    
     -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-position:center center;
}

<div id="imagecontainer">
  hi
  dadsa
  <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div>
</div>

Answer 3

需要更改imagecontainer id上的某些css，以便克服您的问题

＆＃13;

＆＃13;

#imagecontainer {
    
  background-attachment: scroll;
background-clip: border-box;
background-color: hsl(211, 58%, 53%);
background-image: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto !important;
border: 1px solid;
height: auto;
width: 100%;
}

＆＃13;

<div id="imagecontainer">
  hi
  dadsa
  <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;