Question

我正在尝试将图像放入div中，但我不知道该怎么做。

#header {
border: 10px solid blue;
width: 50%;
height: 20%;
}

<div id = 'header'>
<img src = "https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg">	
</div>

Answer 1

只需将img宽度设置为100％，它就会缩放到#header容器的宽度。

#header {
  border: 10px solid blue;
  width: 50%;
  height: 20%;
}
img {
  width: 100%
}

<div id = 'header'>
  <img src = "https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg">	
</div>

Answer 2

看看。用这种方式改变你的CSS。在您的css.Working Link

中设置img标记

CSS：

 #header img{
  border: 10px solid blue;
  width: 50%;
  height: 20%;
  }

您也可以设置img{width:100%}。享受！

Answer 3

您可以像这样使用background-size: cover：

<强> CSS

#header {
  border: 10px solid blue;
  width: 50%;
  height: 20%;
  background: url(https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg);
  background-size: cover
}

<强> HTML

<div id="header"></div>

将图像拟合成div

3 个答案: