Question

我必须在完全覆盖的div中显示图像。因为如果我需要调整div图像的大小，还需要调整大小。因为我需要将图像的宽度和高度调整到我的整个大小。我试过但失败了。这是我的代码帮助我

<div class="parent">
    <div class="child"><img src="hello.png" /></div>
</div>

.parent { 
        width: 150px; 
        height:150px; 
        position:fixed; 
        top:25px; 
        right:25px;
        border: solid 2px;
}
    .child{
        width: 150px;
        height: 100%;
        z-index: +5;
        top:25px;
    }

    .image-container img{
        width: 100%;
        height: 100%;
    }

Answer 1

而是使用<img>，我会在css中使用，如下所示。试试这个方法：

<div class="parent">
    <div class="child"></div>  
</div>

.parent{
    width: 100%;
    height: 300px;
    min-height: 200px;
    position: relative;
    outline:1px dotted red;
}

.child{
    height: 100%;
    position:relative;
    background:   url("http://image URL")no-repeat;
    background-size: cover;
    background-position: center;
}

请注意，当您发布问题时，请发布您尝试的内容和您面对的错误上面的代码没有任何意义。

Answer 2

我通过在内部图像的％上添加宽度来解决我的问题

＆＃13;

  .parent { 
            width: 150px; 
            height:150px; 
            position:relative; 
            top:25px; 
            right:25px;
            border: solid 2px;
            float: right;
	}
        .child{
            float: left;
            position: absolute;
    width:100%;
    height:100%;
    z-index: +5;
    left:0px;
    top:0px;

        }
        
        .child img{
            position: absolute;
            float: left;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }

＆＃13;

<div class="parent">
  <div class="child"><img src="http://www.madaboutscience.com.au/store/images/genericTestTube.jpg" /></div>
  </div>

＆＃13;

需要将div与图像匹配

2 个答案: