Question

html中怎么让图片的中间居中显示在div中？？

如图：图片是400*300的，div设置了300*200，怎么让图片的中间居中显示在比图片小的DIV中

Answer 1

<style>
  div {
    border: 1px solid #000; /* 给div添加黑色边框，方便辨认 */
    text-align: center; /* 令div中的元素居中 */
  }
  img {
    border: 1px solid #f00; /* 给图像添加红色边框，方便辨认 */
  }
</style>
<div>
  <img src="http://www.w3school.com.cn/i/site_photoref.jpg"/>
</div>

Answer 2

只能用背景定位

<style>
div{width:300px;height:200px;background:50% 50% no-repeat}
</style>

<div style="background-image:url(xx.jpg)"></div>

追问

效果有了，但有没有把图片写在img里的方法

追答

可能就需要用js了 我不会啊 其他的不好弄
这个不影响加程序的

Answer 3

<style>
/* 已经知道div和img的宽高 */
div {
    width: 300px;
    height: 200px;
    overflow: hidden;
}
img {
    margin-top: -50px; /* div height - img height*/
    margin-left: -50px; /* div width - img width */
}
</style>

Answer 4

比图片的框小，而且不能压缩？这就类似想要把海装进瓶子里？可能么？

追问

只显示想要显示的部分，其余的屏蔽掉，就相当于只装我们想要的一瓶子的海水即可