resize list of images
Hi,
I have a list of images with spaces between each.
can I get them to resize when I reduce browser size?
I would like the images to be smaller and the spaces between them to sqeeze up.
I have a list of images with spaces between each.
can I get them to resize when I reduce browser size?
I would like the images to be smaller and the spaces between them to sqeeze up.
#headingIconList ul
{
margin: 0;
list-style-type: none;
border:none;
}
#headingIconList ul li
{
display: inline;
}
#headingIconList ul li a
{
text-decoration: none;
padding-right: 10%;
}//////////////////////////////
......................
<ul>
<li>
<a href=""><img src="../images/ic1.png" alt="head"/></a>
<a href=""><img src="../images/ic1.png" alt="head"/></a>
<a href=""><img src="../images/ic1.png" alt="head"/></a>
<a href=""><img src="../images/ic1.png" alt="head"/></a>
</li>
</ul>ASKER
Yes I know media queries but with images they resize automatically as the browser reduces in size
Here is an example here of a heading with an image.
See how it resizes.
http://www.mymrt.net/ComputerTraining/home.html
I cant do this for a list of images as links
Here is an example here of a heading with an image.
See how it resizes.
http://www.mymrt.net/ComputerTraining/home.html
I cant do this for a list of images as links
img, embed, object, video {
max-width: 100%;
}
seems to work fine http://jsbin.com/itixel/1/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
img{
max-width: 100%;
}
</style>
</head>
<body>
<ul>
<li>
<a href=""><img src="http://www.nuvo.net/binary/76d4/beerbuzz600.jpeg"/></a>
<a href=""><img src="../images/ic1.png" alt="head"/></a>
<a href=""><img src="../images/ic1.png" alt="head"/></a>
<a href=""><img src="../images/ic1.png" alt="head"/></a>
</li>
</ul>
</body>
</html>ASKER
excellent images !
here is the issue , if the images are small like 100X100 and they are all in a row, the dont resize like the larger images and they drop down to the next line.
This resizes image to 80% of the screen in a media query.
here is the issue , if the images are small like 100X100 and they are all in a row, the dont resize like the larger images and they drop down to the next line.
This resizes image to 80% of the screen in a media query.
ul li img{
width:80%; height:80%;
} ASKER
When I resize my webpage, the row of 4 images in the heading dont resize and they go on another line.
I just want the images to reduce in size as the browser reduces.
Here is what I am talking about
http://www.mymrt.net/ComputerTraining/comptest.html
I just want the images to reduce in size as the browser reduces.
Here is what I am talking about
http://www.mymrt.net/ComputerTraining/comptest.html
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Although not optimal, you can set the size by changing the width and height in your css
ul li img{width:80%; height:80%;}