Наложение img поверх другого img

В следующем HTML, я хочу, чтобы маленький значок удаления появлялся в верхнем левом углу контейнера (div). Большее изображение (кошка) должно находиться внутри div и масштаба, чтобы оно не превышало высоту div. Мне нужен div, чтобы плавать влево из-за того, как он используется в другом месте. Значок удаления предполагает наложение поверх большего изображения (если увеличенное изображение заполняет ширину div). Обратите внимание, что большее изображение может иметь ширину, которая намного меньше, чем div, и она центрируется в div. В этом случае значок удаления по-прежнему находится в верхнем левом углу, но на самом деле не накладывается поверх большего изображения, так как большее изображение будет слишком маленьким. Ширина div всегда остается неизменной независимо от ширины большего изображения.Наложение img поверх другого img

Вот мой HTML:

<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0"> 
    <img src="http://hellopune.mobi/site2/Images/icon_delete.png" /> 
    <img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" /> 
</div>

И в стельку: http://jsfiddle.net/AndroidDev/eJZ7X/

источник

2014-01-15 AndroidDev

вам нужно что-то вроде этого?

Demo

div { 
    position: relative; 
} 

div img { 
    max-width: 100%; 
    max-height: 100%; 
} 

div img:first-of-type { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
}

Здесь я позиционирование удалитьimg к absolute с top и right свойствами, если вы хотите left, чем вы можете сделать это, и убедитесь, что вы обернуть их внутри position: relative; контейнера ,

Примечание: Я использую first-of-type псевдо так что вы не должны изменять свой DOM, но если вы считаете, что порядок img может измениться, чем лучше назначить class к удалитьimg вместо.

Как вы считаете, мои селекторы слишком общий характер, предположим, что у вас есть родитель с class под названием .img_holder и это будет иметь div вложенными дальше и чем вы вкладываете как img внутри, что так ваш селектор будет

.img_holder > div { 
    position: relative; 
} 

.img_holder > div > img { 
    max-width: 100%; 
    max-height: 100%; 
} 

.img_holder > div > img:first-of-type { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
}

И DOM будет выглядеть

<div class="img_holder"> 
    <div> 
     <img src="#" /> 
     <img src="#" /> 
    </div> 
    <div> 
     <img src="#" /> 
     <img src="#" /> 
    </div> 
    <div> 
     <img src="#" /> 
     <img src="#" /> 
    </div> 
</div>

источник

2014-01-15 09:30:46

Вы также можете избавиться от многих стайлинга от оригинальной скрипке, а также: http://jsfiddle.net/crazytonyi/eJZ7X/3/ – Anthony

Это выглядит так. Я могу жить с кнопкой удаления в правом верхнем углу. У меня все еще есть проблема.Я не уверен, как объединить ваш CSS с теми, которые я перечислял для каждого элемента. Мне нужно использовать стили, потому что мне нужно повторить это для нескольких div. Вы написали его очень универсальным. Не могли бы вы переместить мои стили к себе и дать каждому свое имя. Извините, но я как бы потерял, как это сделать. – AndroidDev

@ Энтони Я благодарен за это, встроенные стили всегда сосут .. –

Я обновил свою скрипку here

Значок img теперь имеет класс значков и абсолютно расположен в div.

HTML:

<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0"> 
    <img class="icon" src="http://hellopune.mobi/site2/Images/icon_delete.png" /> 
    <img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" /> 
</div>

CSS:

.icon { 
    position: absolute; 
}

источник

2014-01-15 09:32:16 donnywals

Наложение img поверх другого img

ответ

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