div中的图片

Question

所以我想写一些css所以我可以制作一个预设的div大小，我可以放入图片。即使图片比div大，我想让它只显示div可以显示给你的东西。所以有点像裁剪它或什么的。我想制作一个可以点击的小缩略图，看看整个画面。我不知道从哪里开始。请帮忙。谢谢！

Answer 1

.yourDivClass {
    height: #px;
    width: #px;
}

.yourDivClass img {
    margin-left: auto;
    margin-right: auto;
}

这将创建固定大小的div，然后将图像居中在div中，只有div的大小可见图像。

Answer 2

你可以这样做：

div {
    width: 300px;
    height: 300px;
    overflow: hidden;
}

width和height会阻止div自动调整大小，overflow: hidden会隐藏（或裁剪）除div以外的所有内容boundries

这个JSFiddle将向您展示JS和CSS如何非常简单......
http://jsfiddle.net/ProgrammerKid/bh2dz8Lq/
（确保你看看css ......非常简单）

Answer 3

#divId{
    width: xpx;
    height: xpx;
}
#imgId{
    margin-right: auto;
    margin-left: auto;
}
#imgId:hover{
    width: 100%;
}

将鼠标悬停在图像上时，图像会缩小到div的大小。