将图像放在 HTML 5 中的 div 中答案

【问题标题】：Placing image inside a div in HTML 5将图像放在 HTML 5 中的 div 中
【发布时间】：2013-10-23 03:56:22
【问题描述】：

我的简单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 网站

【问题讨论】：

标签： c# jquery html css asp.net-mvc-4

【解决方案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/

【讨论】：

我认为不需要设置height 属性，我猜它默认是自动的，如果width 设置为100%，高度应该根据获取的宽度缩放. +1 虽然
@larssy1：谢谢。像魅力一样工作。我的问题是，显然这似乎有效，但为什么人们要编写调整大小的脚本？他们的目的是什么？
@HimBromBeere 浮动是在提出问题的人的上下文中。我想浮动是他们的目的，适合他的布局。
@nowhewhomustnotbenamed。我其实不知道。可能会保留实际测量值。
@larssy1 - 是的，你完全正确。但是，仍然使用height:auto 会更好（我的意见），因为使用height:100% 时，图像可能会根据实际尺寸变形。当然问题是“如何将图像放入整个 div 中”，所以这并不重要，真的

【解决方案2】：

试试这个...

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

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

【讨论】：

【解决方案3】：

只需在 .css 文件中添加

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

关于inherit ？图片会自动调整为 60 * 60 吗？
如果您将头像 div 的高度更改为 100 和 100，则图像会调整为 100，所以是的，图像会随着 div 的宽度和高度缩放。
+1。谢谢。所以，我假设，正如另一张海报所说，width:inherit 和 width:100% 都做同样的工作？
width:100% 填充父 div，而 inherit 只是接管父 div 的宽度。结果是一样的

【解决方案6】：

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

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

【讨论】：

谢谢。但是，将其设置为 block 有什么意义？（对不起，如果这是一个愚蠢的问题，我是新手并试图理解）
块元素，可以有尺寸、边距、填充等。这些是用于构建目的的元素。内联元素主要用于展示。像文本等。为了安全起见，我建议使用 display: block，因为我不知道在那之前你的 css 代码中还有什么。此外，通过制作显示块 img 标签，您可以修复一些恼人的空白，例如图像下方的边距。

【解决方案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
}

【讨论】：