WordPress.org

Ready to get started?Download WordPress

Forums

Resize image keeping both sizes on ratio (3 posts)

  1. Spiff75
    Member
    Posted 1 year ago #

    I have a photo blog on the very final stages and this is the last problem I'm struggling with. The layout has fixed menu bar on the right and the content flows on the right. When photo is opened from gallery page to it's own, it is supposed to be resized so that either side is not over (for example) 70% of the free space. But not just that. It should also stay in horizontal and vertical center of the right content div. At this point everything works except when the image is a portrait it goes over the viewport making the page scrollable.

    Is this possible to achieve with only CSS to please the few percent that has JS not activated? If not, well thats not a deal breaker.

    The HTML:

    <div id="wrapper">
      <div id="left_column">
      </div>
      <div id="right_column_post">
          <div id="post_container">
            <img src="img.jpg" width="750" height="1000"/>
          </div>
      </div>
    </div>

    CSS:

    #right_column_post{
        height: 100%;
        width:auto;
        margin-left:240px;
        position: relative;
    }
    
    #post_container {
        width:100%;
        height:100%;
        display: block;
        vertical-align: middle;
        text-align:center;
    }
    
    #post_container:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em; /* Adjusts for spacing */
    }
    
    #post_container img{
        max-width:70%;
        height:auto;
        display: inline-block;
        vertical-align: middle;
        margin:auto;
        position:relative;
    }

    This is close: http://jsfiddle.net/jcAGj/ but it'll break the layout if implemented as is.

  2. Spiff75
    Member
    Posted 1 year ago #

    I got it working ...kind of. I did a stripped down test page and it works:

    http://tomiphotography.com/wp-content/themes/Photomi/Test/post-2.html

    But when I use the same exact css in the main WP page the image ratio goes haywire and the image isn't centered????:

    http://tomiphotography.com/?p=176

    :(

    Any idea what might be in WP that overrides some css?

    HTML:

    <body>
    
        <div id="wrapper">
          <div id="left_column">
          </div>
    
          <div id="right_column_post">
    
              <div id="post_container">
    
                    <img src="http://tomiphotography.com/wp-content/uploads/2013/04/Ruka-viimeinen.jpg"/>
    
            </div>
    
          </div>
    
        </div>
    
        </body>

    CSS:

    html {
    		height: 100%;
    		padding:0;
    		margin:0;
    	}
    
    	body {
    		background-color: #000000;
    		height: 100%;
    		padding: 0;
    		margin: 0;
    
    		background: url(img/bg.jpg);
    		background-repeat: no-repeat;
    		background-attachment: fixed;
    		background-position: bottom left;
    		-webkit-background-size: cover;
    		-moz-background-size: cover;
    		-o-background-size: cover;
    		background-size: cover;
    	}
    
    	#wrapper {
    		float: left;
    		height: 100%;
    		width:100%;
    		padding:0;
    		margin:0;
    	}
    
    	#left_column {
    		position: fixed;
    		top: 0;
    		bottom: 0;
    		left: 0;
    		z-index:100;
    		width: 240px;
    		height: 100%;
    		overflow: hidden;
    		background-color:#ff0000;
    
    	}
    
    	#right_column_post{
    		height: 100%;
    		width:auto;
    		margin-left:240px;
    		position: relative;
    	}
    
    	#post_container  {
    	  position:fixed !important;
    	  position:absolute;
    	  margin:auto;
    	  text-align:center;
    	  top:8%;
    	  right:80px;
    	  bottom:10%;
    	  left:320px;
    	}
    	#post_container img {
    		max-width:100%;
    		max-height:100%;
    		padding:4px;
    		background-color:#fff;
    	}
  3. Spiff75
    Member
    Posted 1 year ago #

    I tried to make the resizer with javascript, but I can't get it to work as I'm not really an expert on this. Any help?

    http://jsfiddle.net/DJngT/

Topic Closed

This topic has been closed to new replies.

About this Topic