Блог

Главная - Вопросы по программированию - Отображение кнопки поверх уменьшенного изображения

Отображение кнопки поверх уменьшенного изображения

#html #css #twitter-bootstrap-3

#HTML #css #twitter-bootstrap-3

Вопрос:

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

 <div class="thumbnail">
    <img class="img-responsive"alt="300x200" src="network_sec.jpg">
    <button class="btn btn-default btn-warning pull-right"><span class="glyphicon glyphicon-user"></span> 10</button>

    <div class="caption">
        <h3 align="center">Network Security</h3>
        <br>
        <p>
        <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-wrench"></span> Manage</button>
           <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-eye-open"></span> Preview</button>
            <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-pencil"></span> Edit Info</button>
        </p>   
    </div>
</div>

Я пытаюсь выровнять кнопку в нижней правой части изображения. Любые предложения о том, как я могу достичь желаемого результата?

Комментарии:

1. используйте абсолютную позицию для кнопки и относительную позицию для миниатюры и контейнера миниатюр и кнопок

2. попробуйте это -<button class=»btn btn-btn по умолчанию-предупреждение о вытягивании вправо» style=»позиция: абсолютная; поле слева: -5 пикселей; поле сверху: 30 пикселей;»>

Ответ №1:

Я бы поместил изображение кнопки в новый div, а затем использовал относительное и абсолютное позиционирование следующим образом.

HTML

 <div class="thumbnail">
    <div id="thumb">
    <img class="img-responsive"alt="300x200" src="network_sec.jpg">
    <button class="btn btn-default btn-warning pull-right"><span class="glyphicon glyphicon-user"></span> 10</button>
     </div>  
    <div class="caption">
    <h3 align="center">Network Security</h3>
    <br>
   <p>

    <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-wrench"></span> Manage</button>
    <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-eye-open"></span> Preview</button>
    <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-pencil"></span> Edit Info</button>
 </p>   

</div>
</div>

CSS

 #thumb
{
    position: relative;
    width: 300px;
    height: 200px;
}

#thumb img
{
    z-index: 1;
    position: absolute;  
    width: 300px;
    height:200px;
    top: 0;
    left: 0;

}
#thumb button
{
    z-index: 5;
    position: absolute;
    bottom: 0;
    right: 0;
}

Это то, что вы имели в виду?

Комментарии:

1. Да, расположение кнопки — это то, что я хотел, но теперь оно изменило размер всего изображения. Я бы хотел, чтобы изображение оставалось в исходном размере.

2. Я не был уверен, какой размер изображения был основан на вашем html, но я увидел 200×300, поэтому предположил, что это так. Вы можете изменять ширину и высоту как для стилей thumb, так и для img.

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

4. можете ли вы использовать проценты? или свойства max-width и max-height?

5. Установка ширины на авто помогает, но высота все еще вызывает у меня проблему. Если я установлю высоту на auto, все изображение исчезнет

Метки: