Question

我的简单div元素如下：

<div class="avatar">
  <img src="http://quickshare.my3gb.com/download/testpic.jpg" />
</div>

（原始图像为216 * 216像素） 我的CSS如下，

.avatar {
float: right;
border: 1px #ccc solid;
width: 70px;
height: 80px;
overflow: hidden;
position: absolute;
}

小提琴，http://jsfiddle.net/BMU4Y/2/

问题是，我无法让图像适合它所在的div。

非常感谢任何帮助。 [我也尝试过jquery图像缩放器，但找不到真正有用的东西:(]

请注意，这是我的HTML 5网站使用C＃和MVC 4构建的

Answer 1

这里不需要溢出。为了使图像适合div，它应该具有100％的高度和宽度。

.avatar {
float: left;
border: 1px #ccc solid;
width: 70px;
height: 80px;
position: relative;
}
.avatar img {
    width: 100%;
    height: 100%;
}

http://jsfiddle.net/BMU4Y/3/

Answer 2

试试这个......

.avatar {
float: left;
border: 1px #ccc solid;
width: 70px;
height: 80px;
overflow: hidden;
position: relative;
}

.avatar img {
max-width:100%;
height:100%;
}

Answer 3

只需添加.css文件

.avatar img{
  width:100%;
 height:100%;
}

Answer 4

如果我理解您希望图像适合您明确大小的div，那么将以下内容添加到您的CSS将使其工作：

.avatar img {
    height: 100%;
    width: 100%;
}

Answer 5

  .avatar 
    {
        float: left;
        border: 1px #ccc solid;
        overflow: hidden;
        width:60px;
        height:60px;
    }

    .avatar img {
        width:inherit;
        height:inherit
    }

Answer 6

.avatar img {
  width: 100%;
  height: auto;
  display: block;
}

您需要将图像放在显示块中，而不是默认的内联。然后给它100％宽度（其父宽度），但对于高度我将其设置为自动。不是100％，因为它会在两个维度上拉伸它，通常会产生奇怪的结果。

Answer 7

将div的宽度和高度继承到Image。添加下面的CSS，它将像魅力一样工作。

小提琴：http://jsfiddle.net/BMU4Y/8/

.avatar {
float: left;
border: 1px #ccc solid;
width: 70px;
height: 80px;
overflow: hidden;
position: relative;
}
div.avatar img
{
    width:inherit;
    height:inherit
}

将图像放在HTML 5中的div中

7 个答案: