Наложение div на изображение и подгонка по ширине - PullRequest
Новая
       26

Наложение div на изображение и подгонка по ширине

1 голос
/ 21 марта 2012

Как получить 100% ширины изображения при наведении изображения,

Вот вопрос:

http://whotheyrewearing.tumblr.com/

Изображение может быть любой ширины, но я не хочу, чтобы оно переполняло изображение, я использовал абсолютное позиционирование с левым и правым значением, равным 0, чтобы растянуть его, но оно растягивается до ширины содержащего элемента div, а не imgWrap. пяди.

Ответы [ 2 ]

3 голосов
/ 21 марта 2012

Прежде всего, если элемент img является плавающим, его родительский размер не будет автоматически получен. Кроме того, как я вижу, imgWrap - это div, а не span, поэтому он использует максимально возможную ширину и устанавливается на display: block.

Ваш элемент img должен быть заключен в другой элемент с отображением inline или inline-block. Это позволит убедиться, что элемент обертки принимает размер своих дочерних элементов. Присвойте ему относительную позицию, тогда вы можете поместить заголовок с абсолютной позицией и установить для него ширину 100%.

Надеюсь, это поможет. Удачи!

приписка

Проверил твой код, вот что, я думаю, тебе следует сделать. Добавьте следующее в ваш div.imgWrap: 

display: inline-block;
position: relative;

Я думаю, что в вашем случае этого будет достаточно.

0 голосов
/ 21 марта 2012

Вы можете использовать что-то вроде: 

<a href="#">
 <img src="image_path">
 <span>Your text add</span>
</a>

и css: 

a {
    display: block;
    overflow: hidden;
    position: relative;
}

span {
    background: #000;
    bottom: 0;
    color: #FFFFFF;
    display: none;
    max-height: 100px; /* same as the biggest image*/
    opacity: 0.65;
    overflow: hidden;
    padding: 0 2px;
    position: absolute;
    width: 100px; /* same as the image*/
}

a:hover span {
    display: block;
}

с соответствующим классом,

...