Изменение размера изображения внутри div

Question

У меня есть 2 divs, и я хотел изменить размеры изображений внутри этих разделов, но они должны заполнить div и ограничить пропорции.

Как этот: http://www-07.ibm.com/sg/60/

Если вы пытаетесь изменить их размер, они будут ВСЕГДА заполнить их дивы и изображения будут держать их ВСЕГДА пропорции.

HTML:

<div class="one"> 
     <img src="imgs/photo1.jpg" class="photo1"> 
</div> 
<div class="two"> 
     <img src="imgs/photo2.jpg" class="photo2"> 
</div> 

CSS:

.one{ 
    float:left; 
    width:50%; 
    height:50%; 
    position:relative; 
    overflow:hidden; 
} 

.two{ 
    position:relative; 
    overflow:hidden; 
    width:50%; 
    height:50%; 
    float:left; 
} 

Как укладывать эти образы, чтобы выглядеть?

http://www-07.ibm.com/sg/60/

Answer 1

я мог бы что-то отсутствует, но если я правильно понимаю ваш вопрос, вы можете просто добавить:

width: 100%; 

своим img теги, и они всегда будут заполнить содержащий DIV.

Answer 2

Сайт использует jQuery плагин для эффекта, однако вы можете получить то же самое css3 background-size:cover.

То, что вы должны сделать, это:

Удалить исходное изображение и передать его через фон и использовать background-size:cover.

<div class="one"> 

</div> 

.one{ 
float:left; 
width:50%; 
height:50%; 
position:relative; 
overflow:hidden; 
background: url("path to image") no-repeat center center; 
background-size : cover; 
} 

Answer 3

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

.one img, .two img { 
    width:100%; 
    height:auto; 
} 

Answer 4

Я думаю, что вы бы получить лучший результат, не используя тег, но вместо того, чтобы сделать эти фоновые изображения с атрибутом:

background-size:cover; 
 
background-position:center;