Implement adaptability in self-written image slider?

Question

css

There is a small self-written JQuery slider with two twists:

<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;
}

It is necessary to implement adaptability for it, namely: so that the images inside the divs are no more than the width of the parent .slider

What are the options?

Answer 1

The simplest example, it seems to me, is through a pseudo-class.

Answer 2

Set an event to resize the window. Then take the width of the screen and change it for the pictures.