I am facing an issue with my image slider where the images automatically resize in the same ratio when I adjust my browser size. What I want to achieve is to keep the height constant while adjusting the width slightly until a specific breakpoint using @media queries.
The effect can be seen on the slider at when resizing the browser.
This is the HTML code I am using:
<div id="content">
<ul class="rslides" id="slider1">
<li><img src="../Img/001.jpg" alt="photo" /></li>
<li><img src="../Img/002.jpg" alt="photo2"/></li>
<li><img src="../Img/003.jpg" alt="photo3"/></li>
</ul>
</div>
And here is the CSS code:
#fondo3 {
background-color: black;
position: absolute;
right: 0;
left:0;
top:10%;
margin: 0;
z-index: 10;
width:auto;
}
.rslides {
min-width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}