how to make a full width slider without loosing quality? - slider

Question

i am trying to create a full width slider for only images with text. My slider is full width but needs a specific height (example 400px)because it is going to be displayed as the banner of my website.
The problem is that the images look blurry and i dont know the proper size or perhaps the code to prevent this.
This is what i have so far as for my html and the images's size
<div class="wrapper">
<div class="full-width">
<div class="inner">
<div class="slide">
<div>Lorem ipsum dolor sit amet, consectetur. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/sports" width="1020" height="400">
</div>
<div class="slide">
<div>Nullam dictum magna sapien, sed adipiscing nibh. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/city" width="1020" height="400">
</div>
<div class="slide">
<div>Donec malesuada hendrerit velit, sed consequat. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/cats" width="1020" height="400">
</div>
<div class="slide">
<div>Maecenas augue dui, rhoncus a blandit non. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/business" width="1020" height="400">
</div>
</div>
<div class="controls">
<
>
</div>
<div class="slide-nav"></div>
</div>
</div>
as for my css:
.full-width {
overflow: hidden;
position: relative;
background: #fff;
}
.full-width,
.full-width .slide img {
width: 100%;
}
.full-width:hover {
background: transparent;
}
.full-width .inner {
overflow-y: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
filter: alpha(opacity=00);
-moz-opacity: 0;
opacity: 0;
}
.full-width .slide {
float: left;
overflow-x: hidden;
position: relative;
}
.full-width .slide img {
height: auto;
}
.full-width .slide div {
color: #fff;
position: absolute;
padding: 0 5%;
left: 0;
width: 90%;
text-align: right;
font-size: 32px;
}
.full-width .slide div p {
float: right;
text-align: left;
padding: 10px;
margin: 0;
background: rgba(0, 0, 0, 0.8);
}
.full-width .controls a {
position: absolute;
top: 50%;
margin-top: -46px;
display: block;
background: rgba(0, 0, 0, 0.5);
text-decoration: none;
color: #fff;
font-size: 40px;
padding: 0 10px 2px 7px;
line-height: 40px;
*display: none;
}
.full-width .controls a.left {
left: 0px;
}
.full-width .controls a.right {
right: 0px;
}
.full-width .slide-nav {
*display: none;
font-size: 75px;
margin: 0 auto;
line-height: 50px;
font-family: 'Helvetica', Arial, sans-serif;
}
.full-width .slide-nav span {
cursor: pointer;
color: #ccc;
}
.full-width .slide-nav span.current {
color: #333;
}
.lt-ie9 .full-width p,
.lt-ie9 .full-width .controls a {
background: url('bg-trans.png') repeat;
_background: #333;
}
what i need to know if it is a matter of adjusting only the image size although i tried that already and didnt worked or if it remains in the code.
thanks in advance for any help!

Answer 1

If the images are getting blurry at larger sizes, you will need to produce an image with the dimensions of the maximum area you want it to cover. This way when it is at full size the quality will be clear.
When you decrease the screen size, the image size will likely be decreasing too. In my experience it is better to start large and scale to a smaller size to preserve the clarity of the image, so you should approach it that way.
If the problem is that it is not scaling correctly because the proportions are off because of the fixed height, then you will need to produce images with the correct proportions to support the size you need. This is most easily done with image editing software like Photoshop rather than making adjustments in HTML.