由于h2在容器上方，导致图像溢出容器

Question

当我使用height：100％时，我面临图像溢出其容器的问题；图片本身。这是代码：

<div>
    <h2>Website</h2>
    <img src="./images/reptiles.jpg" alt="" > 
  </div>

CSS
div{
height:480px;
}

div>img{
width:100%;
height:100%;
}

Answer 1

尝试此html

<div>
  <h2>Website</h2>
    <figure>
       <img src="https://www.thalesgroup.com/sites/default/files/styles/article_card/public/database/d7/e-services_modified_1.jpg?itok=DkaYx8h8" alt=""  /> 
    </figure>

  </div>

小提琴链接为https://jsfiddle.net/7vxnw95o/1/

Answer 2

尝试下面的代码，希望对您有所帮助。谢谢

.parent-div{
display: flex;
flex-direction: column;
height:480px;
}

div>img{
width:100%;
height:100%;
}

<div class="parent-div">
  <h2>Website</h2>
	<div>
    <img src="https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg" alt="" > 
  </div>
</div>