配售图像一个div内部在HTML 5

我的简单div元件是如下：配售图像一个div内部在HTML 5

<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/

的问题是，我不能让图像以适合在d iv它驻留在哪里。

任何帮助将不胜感激。 [我也尝试了jQuery的图像缩放器，但没有找到任何东西，真正起作用:(]

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

来源

2013-10-15 now he who must not be named.

此处不需要溢出，而且，使图像适合DIV，它应该有100％HEIGH和宽度。

.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-15 11:08:04 larssy1

我不认为'height'属性需要进行设置，我想这是自动默认情况下，如果'width'设置为'100％'的高度应根据所采用的宽度进行缩放。 +1虽然 – Cyclonecode

你是对的，不需要设置两个值。 – larssy1

为什么浮动？我不认为这是TO的意图... – HimBromBeere

就在增加。 css文件

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

来源

2013-10-15 11:07:42

如果我是正确的，你想要的形象适合您的明确大小专区内的了解，然后添加以下到你的CSS将使其工作：

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

来源

2013-10-15 11:08:54

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

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

来源

2013-10-15 11:09:28

？图像是否自动调整为60 * 60？ –

如果将化身div的高度更改为100和100，则图像大小调整为100，所以是的，图像会随着div的宽度和高度而缩放。 –

+1。谢谢。所以，我假设，正如另一位海报所说，“width：inherit'和'width：100％'做同样的工作？ –

试试这个.. 。

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

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

来源

2013-10-15 11:10:09

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

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

来源

2013-10-15 11:13:17 MentalRay

谢谢你。但是，将其设置为“阻止”有什么意义？（对不起，如果这是一个愚蠢的问题，我是新的，并试图了解） –

块元素，可以有尺寸，边距，填充等这些是建筑目的的元素。内联元素主要用于演示。就像文本等等，我建议display：block，以保证安全，因为我不知道在你的css代码之前你还有什么。此外，通过制作显示块img标签，您可以修复像图片下方的边距等烦人的缝隙。 – MentalRay

将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 
}

来源

2013-10-15 11:14:04 vendettamit

配售图像一个div内部在HTML 5

回答

相关问题