Search jQuery

jQuery Forum

How to Fit Image(s) in a liquid Parent

in Using jQuery • 10 years ago

I am trying to present an Image Slider in a liquid layout (parent) and I do not like to limit the height and with of the images while they can be requested by big screen monitors (27") to smalls one like 11" or even less.

Can you please let me know if there is plugin to help me to fix this issue?

Right now I am using a slider(plugin - Nivo) which has a fixed layout and I am not able to change it to liquid

Here is the Code which I have:

HTML

<!DOCTYPE HTML>
<html>
<head>
<title>GALLERY</title>
</head>
<body>
<div id="row_1">
<div class="container"></div>
</div>
<div id="row_2">
<div class="container">
<div id="slideshow">
<div id="slider">
<img src="img/1.jpg" title="" style="" /></div>
<img src="img/2.jpg" title="" style="" /></div>
<img src="img/3.jpg" title="" style="" /></div>
<img src="img/4.jpg" title="" style="" /></div>
</div>
</div>
</div>
</div>
<div id="row_3">
<div class="container"></div>
</div>
</body>
</html>

CSS:

* {
margin: 0;
padding: 0;
}
html{
height:100%;
width: 100%;
}
body {
background-color: #272321;
height:100%;
width: 100%;
}
#row_1 {
position:relative;
height:15%;
width: 100%;
}
#row_2{
position:relative;
height:77%;
width: 100%;
}
#row_3{
position:relative;
height:8%;
width: 100%;
background-color: #151110;
}
.container{
position:relative;
margin: 0 auto;
height:100%;
width: 80%;
}

Do you think if it is a good idea that I use several layouts for different screen size? Is there any way to fix this things with Jquery?

Thanks for your time and comments

Response title

Attachments

jQuery Forum

How to Fit Image(s) in a liquid Parent

Statistics

Tags

Actions

Related Posts