Resize image keeping both sizes on ratio

  • 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: https://jsfiddle.net/jcAGj/ but it’ll break the layout if implemented as is.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Spiff75

    (@spiff75)

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

    https://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????:

    https://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="https://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;
	}
    Thread Starter Spiff75

    (@spiff75)

    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?

    https://jsfiddle.net/DJngT/

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Resize image keeping both sizes on ratio’ is closed to new replies.