2014-01-28 7 views
0

Я хочу поставить один образ поверх другого изображения.Положите одно изображение над другим Изображение

Ниже мой код:

<div style="position: relative; left: 0; top: 0;"> 
    <img id="image1" src="http://i.stack.imgur.com/dgg87.png" /> 
    <img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />    
</div> 

CSS:

#image1 
{  
    top: 0; left: 0; 
    position:relative; 
    z-index:2; 
} 
#image2 
{ 
    position:relative; left:-70; 
    z-index:1; 
} 

fiddle for that

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

Любое руководство Пожалуйста.

+0

http://jsfiddle.net/r5JMM/1/? но я не получил эту часть »* Я хочу, чтобы при увеличении ширины или высоты второго изображения он автоматически увеличивался автоматически. *« –

+0

@ Mr.Alien - Также хочу увеличить размер изображения 1 при увеличении размера изображения 2 или будет установлен его размер с изображения 1. Значения изображения 1 должны работать как контейнер. –

+0

сделано, спасибо, сэр. Ваш код поможет мне, http://jsfiddle.net/kurbhatt/r5JMM/2/ –

ответ

0

Вы можете использовать запас левой в #image2

#image1 {  
    top: 0; left: 0; 
    position:relative; 
    z-index:2; } 
#image2 { 
    position:relative; left:-70px; 
    z-index:1; 
    margin-left: 25px; 
} 
+0

Сэр, можно ли это сделать, используя только div? без img. –

0

Проверьте скрипку: http://jsfiddle.net/r5JMM/5/ для ответа

#image1{position:absolute;} 
#image2{position:absolute;resize:both;} 
.container{position:relative;} 

<div class="container"> 
    <img id="image1" src="http://i.stack.imgur.com/dgg87.png" /> 
    <img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />    
</div> 

Вы можете использовать JQuery изменения размера для выполнения изменения размера операций на изображениях

Смежные вопросы