如何将图像放入div中？

Question

我想在div中插入图像，但我有问题：图像溢出div！ O.O

（对不起我的英文） 这就是＆＃39;代码HTML

 <div class='immagine2'><img src='http://farm4.staticflickr.com/3822/9522792825_c68706706d_o.jpg'></div>

和CSS ...

 div.immagine2 {
      position:relative;
      width:500px;
      height:410px;
      margin: 30px 30px 30px auto; 
  }

 div.immagine2 img {
      float:left;
 position:absolute;
 left:50%;
 top:50%;
      margin-left:-155px;
 margin-top:-75px;
  }

here链接。 什么错了？

重要!!! ：我希望图像有流动，因为我想在右边添加文字！

Answer 1

将overflow: hidden添加到以下ID：

div.immagine2 {
    overflow:hidden;
    ...
}

这将有效防止任何超出div的内容在页面上显示。希望它有所帮助!!

Answer 2

只需将图片放入div text-align: center

即可

<div style="text-align:center;">
  <img src="....">
</div>

Answer 3

将背景图像添加到CSS中（如评论员提到的，如果您希望使用不同的图像，这将无效）。

  background-image: url(../images/picture.jpg)

您可以在CSS中使用大量背景设置。

background-size: 100%;

如果您使用的是px，则可以指定图像应占用的大小。

background-size: 30px 40px;

Answer 4

将overflow: hidden，overflow: auto或overflow: scroll添加到.immagine2容器中会阻止图片“溢出”其容器，但会导致剪切或滚动，具体取决于你如何设置overflow。

如果您只想在其容器中包含<img>，请设置max-width: 100%：

.immagine2 img { max-width: 100%; }

---

修改

要使图片居中和将其保留在文档的流程中，请尝试以下操作：

div.immagine2 {
    margin: 30px auto; 
    width: 500px;
    height: 410px;
    overflow: hidden;
}

div.immagine2 img {
    margin: auto;
    display: block;
}