Question

这似乎是一个重复的问题，但就我而言，没有任何效果。我想将图片放在div内并完整显示，直到有可能为止。我的图片是一个矩形，在角落有边，我希望根据div的大小在div内部看到它。

    .container_img{
       border:1px solid red;
       margin-top:-14px;
       display: table; 
       margin-top:2px; 
       width: 709px; 
       height: 141px;     
       background-image: url("https://i.imgur.com/VBOZfaY.png");
       background-repeat: no-repeat;
    }

    <div class="container_img"></div>

https://jsfiddle.net/86avtx54/

Answer 1

添加background-size: 100% 100%;。请参见下面的代码段

   .container_img{
       border:1px solid red;
       margin-top:-14px;
       display: table; 
       margin-top:2px; 
       width: 709px; 
       height: 141px;     
       background-image: url("https://i.imgur.com/VBOZfaY.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
    }

 <div class="container_img"></div>

Answer 2

您需要设置background-size: contain;或background-size: cover;

Answer 3

检查一下。可以为您提供帮助。

<style>
.container_img{
   border:1px solid red;
   margin-top:2px; 
   width: 100%; 
   height: 100%;     
  
   }
</style>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
<div class="container_img">
<img src="https://i.imgur.com/VBOZfaY.png">
</div>


</body>
</html>

显示图像背景的全宽和全高

3 个答案: