Почему размер изображения не изменяется в следующем сценарии?

0

У меня есть набор из трех горизонтальных изображений. При наведении каждого из этих изображений я показываю изображение с подсказкой. Но проблема, с которой я столкнулся, - это не изменить размер изображения. Если я пойду на уменьшение высоты и ширины изображения инструмента, то отобразится только часть изображения. Фактически все изображение должно отображаться при наведении. Но этого не происходит. Может кто-нибудь, пожалуйста, помогите мне в этом отношении?

Ниже приведен код HTML:

<table style="width:100%" id="thumbs">
                      <tr>
                        <td><span style="cursor:pointer" id="tooltip1"><img id="img1" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/OpenIcon.png"/></span></td> 
                        <td><span style="cursor:pointer" id="tooltip2"><img id="img2" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/ColsedIcon.png"/></span> </td>
                        <td><span style="cursor:pointer" id="tooltip3"><img id="img3" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/SecretIcon.png"/></span> </td>
                      </tr>
                    </table>

Код CSS:

tr span {
    display: block;
    position: relative;
}
tr span:hover {
    z-index: 1;
}
tr span:hover:after {
    content:"";
    background-image: url('http://lorempixel.com/273/274/');
    position: absolute;
    top:50%;
    left: 50%;
    width: 273px;
    height: 274px;
}

Может кто-нибудь, пожалуйста, помогите мне в этом отношении?

Ссылка JS Fiddle выглядит следующим образом: Демо

  • 0
    Выглядит хорошо для меня в скрипке
  • 0
    Yh выглядит хорошо для меня в скрипке. Не могли бы вы объяснить более четко, что вы хотите, чтобы Мэйби по картинкам / скриншотам?
Теги:
tooltip
image-resizing

2 ответа

1 
tr span:hover:after {
    content:"";
    background-image: url('http://lorempixel.com/273/279/');
    position: absolute;
    background-repeat:no-repeat;
    background-size:contain;
    left: 50%;
    width: 100px;
    height: 100px;
}

таким образом вы можете уменьшить размер наконечника инструмента и отобразить все изображение.

Поделиться
  • 0
    Разве это не обрезает изображение, если ширина и высота не равны размеру изображения?
  • 0
    нет, это не так. background-size:cover; заставляет фоновое изображение соответствовать.
Показать ещё 4 комментария
0

ПОПРОБУЙ ЭТО:

tr span:hover:after {
content:"";
background-image: url('http://lorempixel.com/273/274/');
background-size:contain; 
position: absolute;
top:50%;
left: 50%;
width: 273px;
height: 274px;
}
Поделиться
  • 0
    Это contain размер изображения, может быть, добавить background-repeat: no-repeat ?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню