заливка изображения не работает должным образом

Question

Это мой HTML-код

<div class="feature-image"> 
    <a class="featured_image_link" href="#"> 
     <img src="1.jpg"> 
    </a>      
</div> 

Мой размер 1.jpg является 150px x 150px и я упомянул в CSS, как

.feature-image{ 
    width:150px; 
    height:150px; 
    display:block; 
    position:relative; 
    overflow:hidden; 
} 

.feature-image img{ 
    position:absolute; 
    top:-50; 
    left:0; 
    width:100%; 
} 

Я знаю, что когда я даю другой размер изображения (например: 300x200 или 600x350 и т. д.) изображение заполнит внутри, что 150x150 и не растягивается.

Но на самом деле его не работает должным образом. Пожалуйста, помогите, есть ли ошибка в этом коде?

Answer 1

Из кода, который вы вставили, он работает правильно. Можете ли вы ссылаться на сайт, где он жив и не работает? Проблема с кешем?

См jsfiddle: http://jsfiddle.net/FNQZn/

.feature-image { 
    width:150px; 
    height:150px; 
    display:block; 
    position:relative; 
    overflow:hidden; 
} 
.feature-image img { 
    position:absolute; 
    top:-50; 
    left:0; 
    width:100%; 
} 

Answer 2

Ok. Позвольте мне объяснить, как эта работа.

Прежде всего. У вашего CSS есть ошибка.

top:-50; 

Это не будет делать ничего. Это должно быть чем-то вроде

top:-50px; 

Но мой вопрос, почему вы хотите отрицательные поля? он только скроет ваше изображение на 50 пикселей в верхней части.

Хорошо, теперь подходит к настоящей проблеме. Вы говорите, что у вас нет проблем, когда ваше изображение 150X150 пикселей. То потому что родитель <div>150x150. Но если у вас другой размер изображения, например, 300x200, у вас есть проблема.

Это происходит потому, что в вашем CSS вы указали только width: 100% для изображения. Отсюда, на его простой математике.

Ширина = 300 & высота = 200 Поскольку вы упомянули width:100% изображение автоматически получает адаптировались к новой ширине

300(original width)/150(new width)=2 

So taking the same factor of 2 
200(original height)/2=100(new height) 

Таким образом, вы оказанные изображение будет иметь высоту 100px.

если вы хотите изображаемого образа, чтобы иметь такую ​​же высоту DIV просто добавьте эту строку в фотошопе CSS

height: 100%; 

Working fiddle