CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
moidul dargahi
moidul dargahi

Reputation: 193

How to fix the image in center vertically in all resolution

Here is my jfiddle - fiddle, everything is perfect here but only the probelm is when you minimise the window the image goes down , need to fit that image in vertically center which is not happening now

HTML:

<div class="left_panel">
  <div class="slide-frame">
    <img src="http://www.w3schools.com/bootstrap/paris.jpg">                        
  </div>
</div>

CSS:

.left_panel {
    border: 1px solid #ddd;
    border-collapse: collapse;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 300px;
    top: 0;
    background:#ddd;
}
.left_panel .slide-frame::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.left_panel .slide-frame{
  height: 100%;
  text-align: center;
  width: 100%;
}
.left_panel .slide-frame img {
    display: inline-block;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    width: auto;
}

Upvotes: 1

Views: 1306

Answers (3)

Hardik Solanki
Hardik Solanki

Reputation: 325

Please check this for vertical and horizontal div without using height. https://jsfiddle.net/hardyrajput/myuqm5x8/2/

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 50%;
  padding: 20px;  
  color: white;
  text-align: center;
}

Upvotes: 1

Maharajan
Maharajan

Reputation: 188

use this 

.left_panel .slide-frame {
    height: 100%;
    text-align: center;
    width: 100%;
    display: inline-table;
}

just add display property

Upvotes: 0

andreas
andreas

Reputation: 16936

The reason for this behaviour is, that the :after element is an inline element. That causes a little gap between the image and that element. With setting the fon-size to zero, you remove that gap:

.left_panel {
    font-size: 0;
}

Good article about that topic on CSS-Tricks. This solution is preferable, because you aren't using text. With text, there are other approaches to remove the space between inline elements.

Upvotes: 3

Related Questions