Advanced Search

Results 1 to 5 of 5

Thread: Coordinate Width:Height Percentages for Images (Shrunk on Browser Resize)

  1. #1
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default Coordinate Width:Height Percentages for Images (Shrunk on Browser Resize)

    I have created this "container" into which I place images (so that I can place text under them that shows up on hover).

    Code:
                    .image-container {
    		position: relative;
    		float: right;
    		overflow: hidden;
    		width: 290px;
    		height: 290px;
    		margin: 0;
    		}
    I am trying to figure out if there is any way of getting the width and the height to be equal percentages, instead of pixel amounts, so that when a browser resizes, they remain the same proportions, but get smaller.

    Something like:

    Code:
    		width: 25%;
    		height: width;
    The width is the governing dimension, and that works, but the height cannot be the same percentage, because then it won't be a square (it actually doesn't work at all with the height, never mind the varying dimension). It works if I put the width as a percentage and leave the height in pixel amounts, but that's not what I want.

    I tried "height:auto;" and that also didn't work.

    Thanks!
    Last edited by questions; 05-23-2013 at 11:15 PM.

  2. #2
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    I found a different way of doing it that works to shrink the images as the browser resizes - putting them in a list that adjusts in size - but I can't yet figure out how, in this styling, to put text behind the images that shows up on hover (image rollover).

    I also don't understand why the list automatically creates 7px space between the rows, which I had to subtract.


    Code:
                    #small ul {
      		list-style: none;
    		margin-top: 50px;
                    }
    
    		#small ul li {
    		display: inline-block;
    		float:right;
    		margin: -7px 0 0;
    		width:25%;
    		}
    
    		#small ul li img {
        	        width: 100%;
    		}
    
    
               <div id="small">
                    <ul>
                        <li>
                            <img src="image.jpg">
                        </li>
                        <li>
                            <img src="image.jpg">
                        </li>
                        <li>
                            <img src="image.jpg">
                        </li>
                        <li>
                            <img src="image.jpg">
                        </li>
                        <li>
                            <img src="image.jpg">
                        </li>
                    </ul>
             </div>
    If I tell it to not display the image on hover, then the image does disappear, but all the other images shift around to fill the hole left by the image that is not showing now.
    Where in the code to put the text or some kind of text box so it appears?

    Also, how to make the text font size shrink as the list size shrinks?

    Code:
                #small ul li img:hover {
        	    display:none;
    		}
    Last edited by questions; 05-23-2013 at 11:26 PM.

  3. #3
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    I got the text to be on top of the image, and the image to disappear on hover (opacity).
    But I can't get the text not to show up on top of the image in the first place.
    I tried using the z-index to put it lower than the image z-index, and I also tried to change the text opacity on hover (having it set to 0 on "not hover"), but neither worked.

    CSS:
    Code:
    		#small ul {
    		list-style: none;
    		margin-top: 50px;
    		}
    		
    		#small ul li {
    		display: inline-block;
    		float: right;
    		margin: -7px 0 0;
    		width:25%;
    		}
    		
    		#small ul li img {
        	        width: 100%;
    		}
    		
    		#small img:hover {
    			opacity: 0;
    			-webkit-transition: all 300ms ease;
    			-moz-transition: all 300ms ease;
    			-ms-transition: all 300ms ease;
    			-o-transition: all 300ms ease;
    			transition: all 300ms ease;
    			}
    			
    		#small h2 { 
    			position: absolute; 
    			top: 25%; 
    			text-align: center;
    			font-weight: 500;
    			font-size: 2.1em;
    			color: #333;
    		}
    				
    		.smallclass {
    			position: relative; 
    			width:100%;
    			text-align: center;
    			}

    HTML:
    Code:
              <div id="small">
                    <ul>
                        <li class="smallclass">
                			<a href="some.html"><h2>description</h2>
                			<img src="image.jpg" alt="something"></a>
                        </li>
                        <li class="smallclass">
                			<a href="some.html"><h2>description</h2>
                			<img src="image.jpg" alt="something"></a>
                        </li>
                    </ul>
             </div>

  4. #4
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Well, I figured out the answer to this myself in the script of the following website.
    http://www.tylerfinck.com/

    I think it has to do with slowly changing the opacity, and also putting a sort of placeholder off to the side.
    I don't completely understand it, but it works.

  5. #5
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    The website owner above/designer, recommended these two links as a resource:

    http://webdesignerwall.com/tutorials...ign-in-3-steps
    http://masonry.desandro.com/

Similar Threads

  1. Container & Image resize on browser resize
    By mickkmg in forum JavaScript
    Replies: 0
    Last Post: 06-11-2012, 11:59 AM
  2. Auto resize images for viewport/browser window - Thumbnail Viewer II
    By gkornbluth in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-27-2012, 06:20 AM
  3. Replies: 1
    Last Post: 12-24-2009, 06:23 PM
  4. page resize on browser window resize
    By cpeeyush in forum JavaScript
    Replies: 1
    Last Post: 01-25-2009, 09:05 PM
  5. resize iframe to loading image height/width
    By acctman in forum JavaScript
    Replies: 1
    Last Post: 07-24-2007, 07:17 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •