• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 280
  • Last Modified:

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.
#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>

Open in new window

0
jagguy
Asked:
jagguy
  • 3
  • 3
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Typically when you are using media queries to detect browser size you will have multiple sizes of your images and load as needed.

Although not optimal, you can set the size by changing the width and height in your css

ul li img{width:80%; height:80%;}
0
 
jagguyAuthor Commented:
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

img, embed, object, video {

  max-width: 100%;
   
}

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jagguyAuthor Commented:
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.
ul li img{
		width:80%; height:80%;
		} 

Open in new window

0
 
jagguyAuthor Commented:
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
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Working Sample  http://jsbin.com/uqevuk/1/ or http://jsbin.com/uqevuk/1/edit

You will need to tweek the css but this gets you in the right direction.  

Updated css
 #headingIconList{
   /* ---   ignore ------
		text-align:left;
		position:relative; top:22%;left:15%;
   */
	   }
 #headingIconList  img{
         margin-left:1%;
         margin-right:1% ;
         width:20%;		

	   }

/* ---   ignore ------
#headingIconList ul li 
{
     display: block;

 }

#headingIconList ul li a
{
text-decoration: none;
padding-right:  10%;


}
*/

Open in new window

Updated HTML
<div id="headingIconList">
         
                 <a href=""><img  src="http://www.mymrt.net/ComputerTraining/images/ic1.png" alt="head2"/></a>
                  <a href=""><img  src="http://www.mymrt.net/ComputerTraining/images/ic1.png" alt="head2"/></a> 
                  <a href=""><img  src="http://www.mymrt.net/ComputerTraining/images/ic1.png" alt="head2"/></a>
                 <a href=""><img  src="http://www.mymrt.net/ComputerTraining/images/ic1.png" alt="head2"/></a>
          
           
        	</div><!--headingIconList-->

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now