Размещение изображения внутри DIV в HTML 5

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/

вопрос заключается в том, что я не могу получить изображение, чтобы поместиться на д iv, в пределах которой он проживает.

Любая помощь будет высоко оценена. [Я также попытался для Jquery образа-диска, но не смогли найти ничего, что на самом деле работает :(]

Пожалуйста, обратите внимание, что это для моего сайта HTML 5 строится с C# и MVC 4

Answer 1

переполнение не нужно здесь. и, чтобы сделать изображение соответствовать 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/

Answer 2

Просто добавьте. CSS файл

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

Answer 3

Если я прав в понимании того, что вы хотите изображение, чтобы соответствовать в пределах вашего явно размера DIV, а затем добавить следующие строки в CSS сделают работу:

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

Answer 4

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

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

Answer 5

Попробуйте это .. .

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

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

Answer 6

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

Вам нужно изображение, чтобы быть в блоке дисплея и не встраивать, который по умолчанию. Затем дайте ему 100% ширину (от его родительской ширины), но для высоты, которую я установил в авто. Не 100%, потому что он растягивает его в обоих измерениях, как правило, со странными результатами.

Answer 7

Наследовать ширину и высоту div до изображения. Добавьте ниже CSS и он будет работать как шарм.

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 
}