перекрывать часть изображения с помощью CSS при изменении размера

Question

перекрывать часть изображения с помощью CSS при изменении размера

0

У меня есть изображение спрайта, и я хочу, чтобы он анимировался при наведении, как в слайде вверх/вниз, чтобы показать другую скрытую часть (цветной спрайт). Мой css ниже отлично работает для пикселей, но я также хочу сделать его отзывчивым, чтобы он изменялся при уменьшении/изменении браузера.

<div class="img" style="background-image: url(a.jpg)"></div>

<style>
.img {
background-position: 0 -258px;
display: block;
height: 258px;
margin: 0 0 3px;
position: relative;
width: 205px;
z-index: 1;
}
</style>

Anu 11 нояб. 2013, в 17:01

Источник

0

Можете ли вы попытаться объяснить вашу проблему более подробно? Непонятно, о чем ты просишь. Кроме того, вы добавили теги для Javascript, jQuery и Twitter Bootstrap, но не ясно, как ваш вопрос относится к этим тегам.
ASGM 11 нояб. 2013, в 17:15

Теги:

javascript

jquery

css

image

1 ответ

Ещё вопросы

Можете ли вы попытаться объяснить вашу проблему более подробно? Непонятно, о чем ты просишь. Кроме того, вы добавили теги для Javascript, jQuery и Twitter Bootstrap, но не ясно, как ваш вопрос относится к этим тегам.

user1850720 · Answer 1 · 2013-11-11T17-13-00.000Z

Самый простой способ сделать изображение чувствительным - дать ему ширину 100% и оставить его на этом. Таким образом, он всегда будет использовать ширину родительского контейнера, а также использовать эту ширину, чтобы найти соотношение для рендеринга высоты соответственно.

Взгляните на это:

<div class="wrapper"><img class="img" src="a.jpg" width="100%" alt="image" /></div>

<style>
  .wrapper { width:20%;}
</style>

В приведенном выше коде изображение будет корректироваться в соответствии с размерами обертки и будет изменять размер при изменении размера окна.

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

Вот что я придумал:

<style>
  .wrapper { width:244px; height:256.5px; overflow:hidden;}
  .img{transition: 1s ease-in;}
  .wrapper:hover > .img{ margin-top:-105%;}
</style>

Теперь все, что вам нужно сделать, это сделать ваш оберточный класс жидким, и изображение будет следовать за пакетом. Процент майи сделает трюк.