1

我的简单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 图像调整器，但找不到任何真正有效的东西:( ]

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

4

7 回答 7

4

这里不需要溢出。为了使图像适合 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/

于 2013-10-15T11:08:04.663 回答
3

试试这个...

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

.avatar img {
max-width:100%;
height:100%;
}
于 2013-10-15T11:10:09.367 回答
2

只需在 .css 文件中添加

.avatar img{
  width:100%;
 height:100%;
}
于 2013-10-15T11:07:42.890 回答
1

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

.avatar img {
    height: 100%;
    width: 100%;
}
于 2013-10-15T11:08:54.210 回答
1 
  .avatar 
    {
        float: left;
        border: 1px #ccc solid;
        overflow: hidden;
        width:60px;
        height:60px;
    }

    .avatar img {
        width:inherit;
        height:inherit
    }
于 2013-10-15T11:09:28.413 回答
1 
.avatar img {
  width: 100%;
  height: auto;
  display: block;
}

You need the image to be in display block and not inline which is by default. Then give it 100% width (of its parent width), but for the height I've set it in auto. Not 100% because it will stretch it in both dimensions usually with strange results.

于 2013-10-15T11:13:17.367 回答
1

Inherit the width and height of div to Image. Add below CSS and it will work like charm.

Fiddle: 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
}
于 2013-10-15T11:14:04.540 回答