Реализовать адаптивность в самописном слайдере изображений?

Question

[Леонид]

Имеется небольшой самописный JQuery-слайдер с двуями крутилками:

<div class="slider">
	<div>
		<img src="1.jpg">
		<img src="2.jpg">
		<img src="3.jpg">
	</div>
	<a class="prev"></a>
	<a class="next"></a>
</div>

.slider {
	float: right;
	max-width: 712px;
	max-height: 423px;
	overflow: hidden;
	position: relative;
}
.slider div {
	position:relative;
        width: 10000px;
    height: 424px;
}
.slider div img {
	float: left;
	display: block;
	width: 100%;
	max-width: 712px;
}

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

Какие могут быть варианты?

Answer 1

[Евгений Залецкий]

Самый простой пример, как мне кажется через псевдокласс.

Comments

[Леонид]

Эмс, это как?

[Евгений Залецкий]

Тык

[Леонид]

Женя Залецкий, да не, я понимаю что такое псевдокласс, я просто не понимаю как это поможет решить мою проблему?

Answer 2

[akopniko12]

Ставьте событие на resize окна. Потом берите ширину экрана и меняйте ее у картинок.